{T}

SVG 动画综合案例：从简单的插图中创建看似复杂的动画

随着互联网的不断发展，对于 Web 设计和用户体验的要求也越来越高。在这个背景下，动画成为吸引用户眼球、提升用户体验的重要手段之一。而 SVG 作为一种轻量级、可缩放且灵活的图形标准，为实现各种炫酷的动画效果提供了理想的平台。

虽然 SVG 在实现矢量图形和动画方面表现非常出色，但很多 Web 开发者对于使用 SVG 创建动画存在一种恐惧感。事实上，并没有大家所想的那么复杂。在这节课中，我将带领大家学习如何利用 SVG 的强大功能，以及一些基本的 HTML 和 CSS 知识，使得原本静态的插图焕发出生动的动画效果。你将从简单的插图中创建看似复杂的动画效果。

无论你是初学者还是有一定经验的 Web 开发者，都能从这节课中获得启发和收获。动手跟随案例，让你的插图不再局限于静态，而是充满生机与创意。同时还能让进一步深入理解 SVG 的基本概念和实践技巧，这对于你学习和掌握 SVG 动画，提升 Web 设计水平至关重要。

先来看几个带有动画效果的插图

随着 2016 年扁平化设计再次回归，SVG 的再次出现也是很明显的。SVG 维制不各种插图在 Web 应用或网站上的使用也越来越广泛，如上图所示。被应用于 Web 应用或网站上的 SVG 插图，它也以静态或动态的形式向用户呈现。例如下面这几个案例。

Demo 地址：https://codepen.io/kenchen/full/MWxZVY （来源于 @Ken Chen）

Demo 地址：https://codepen.io/sashatran/full/YzXvNJK （来源于 @Sasha）

Demo 地址：https://codepen.io/smashingmag/full/eYjMvXz （来源于 @Smashing Magazine）

Demo 地址：https://codepen.io/lisilinhart/full/NVKOPo （来源于 @Lisi）

Demo 地址：https://codepen.io/taiwei426/full/EVqMaX （来源于 @Vivian Zhang）

可以说，类似上面这些带有动画效果的 SVG 插图在 Web 上数不胜数。你是不是看到这些效果，有一种冲动，想知道 SVG 是如何将静态的插图动起来的。

在开始讲案例和代码之前，我们还需要做一件事情，准备 SVG 插图。

准备 SVG 插图

要学习如何给静态的 SVG 插图添加动画效果，那么首要条件你要有 SVG 插图。

如果你是一名优秀的 Web 设计师，那么你可以使用矢量图形设计工具（例如 Adobe Illustrator、Inkscape、Sketch 和 Figma 等），你可以创建自己的 SVG 插图。这使你能够完全掌握设计过程，以满足特定需求。

如果你只是一名 Web 开发者，又没有 Web 设计师协作你，那么你可以考虑在一些免费的插图网站上寻找符合你需求的 SVG 插图。在 Web 上有许多网站提供免费的高质量的 SVG 插图，你可以从这些网站上获取 SVG 插图文件或所对应的 SVG 代码。这些流行的网站包括 Unsplash 、Freepik 、Pixabay 、Pexels 、Vecteezy 和 undraw 等，在国内你也可以在 iconfont 上找到 SVG 插图。你可以在这些网站上搜索并下载你需要的SVG图形。

如果你要的是带有动画效果的插图，那么推荐你在 LottieFile 平台上寻找，只不过该平台上的 SVG 文件不全是免费的：

URL：https://lottiefiles.com/search?q=illustration

在我们这节课的是静态 SVG 插图，因此，我还是推荐你在前面所提到的网站上寻找你要的 SVG 静态插图。相比而言，我个人比较喜欢在 undraw 上寻找 SVG 插图：

URL： https://undraw.co/illustrations

你可以在该平台上搜索插图相应的关键词，例如“aircraft”，然后将 SVG 文件下载到本地：

然后使用文本编辑器，例如 VScode 打开已下载到本地的 .svg 文件，你就可查看到 SVG 插图相应的代码：

虽然这些平台能让你轻易找到练手的 SVG 插图，但要找到一张近乎符合你项目需求的 SVG 插图，还是有一定困难的。这意味着，从这些平台上下载的 SVG 插图，你需要通过使用图形编辑工具进行微调或修改才可以适应你项目的需求。

另外有一点需要注意的是，从一些平台上下载下来的 SVG 代码会有冗余的代码以及一些不必要的元数据。因此，你可能需要使用像 SVGOMG 对下载下来的 SVG 代码（或文件）进行优化：

SVGOMG：https://jakearchibald.github.io/svgomg/

将优化后的 SVG 代码复制到 VSCode ，并将其保存到本地。

做好准备工作之后，我们就可以开始来看看如何给静态的 SVG 插图添加动画效果。

先从简单的案例开始

我们以 @Smashing Magazine 提供的动画化“Cookie”横幅为例：

Demo 地址：https://codepen.io/smashingmag/full/eYjMvXz

示例中左侧图形是一个 SVG 制作的图形，你可以把它当作是 SVG 插图，其对应的 SVG 代码如下：

SVG
<svg width="300" height="300" viewBox="0 0 223.233 228.464" class="cookie-notice__graphic" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <path fill="#f8c256" d="M114.184 226.368c-.622 0-1.244-.005-1.868-.017a127.269 127.269 0 0 1-27.877-3.647c-9.71-2.387-18.838-5.863-27.13-10.33a104.407 104.407 0 0 1-16.216-10.97 102.99 102.99 0 0 1-14.132-14.159C5.82 162.03-2.39 128.457 4.454 95.155c6.781-33.002 27.068-60.212 55.661-74.658C73.201 13.661 86.757 6.58 102.414 5.703a98.493 98.493 0 0 1 7.822-.312c5.052 0 10.163.396 15.188 1.178l.188.03.18.062c4.151 1.447 8.552 2.631 12.81 3.776 8.73 2.35 17.76 4.78 25.617 9.668 4.319 2.876 8.905 6.291 13.687 10.186 4.473 3.645 9.13 7.72 13.844 12.112l.118.121a111.703 111.703 0 0 1 12.98 17.35 118.893 118.893 0 0 1 9.78 20.251c11.184 28.35 7.83 62.775-8.989 92.05-16.48 28.686-42.768 47.72-72.124 52.221a95.657 95.657 0 0 1-19.33 1.972" />
    <path fill="#351f17" d="M110.238 3.295c-2.656 0-5.344.108-7.992.318-16.088.916-29.832 8.095-43.125 15.04C30.003 33.362 9.31 61.1 2.4 94.731c-6.971 33.935 1.4 68.15 22.969 93.878a104.943 104.943 0 0 0 14.39 14.413 106.635 106.635 0 0 0 16.53 11.18c8.473 4.568 17.765 8.107 27.65 10.536a129.378 129.378 0 0 0 28.335 3.706 98.242 98.242 0 0 0 21.664-1.995c29.947-4.626 56.737-24.023 73.517-53.232 17.124-29.806 20.534-64.893 9.123-93.86a120.915 120.915 0 0 0-9.941-20.571 113.778 113.778 0 0 0-13.222-17.676l-.114-.126-.123-.114c-4.748-4.426-9.44-8.53-13.948-12.204-4.835-3.938-9.475-7.392-13.795-10.27l-.054-.036-.055-.034c-8.121-5.054-17.303-7.524-26.181-9.914-4.22-1.134-8.584-2.309-12.664-3.73l-.359-.126-.376-.057c-5.132-.8-10.35-1.205-15.51-1.205m0 4.19c4.9 0 9.863.376 14.866 1.155 12.67 4.415 26.617 6.156 38.01 13.244 4.36 2.905 8.893 6.304 13.47 10.032 4.577 3.73 9.199 7.79 13.737 12.02a109.344 109.344 0 0 1 12.735 17.024 116.497 116.497 0 0 1 9.61 19.895c22.766 57.713-17.67 131.994-79.467 141.47a93.765 93.765 0 0 1-20.842 1.93 125.658 125.658 0 0 1-27.417-3.586c-9.168-2.253-18.206-5.597-26.634-10.14a102.182 102.182 0 0 1-15.88-10.742 100.606 100.606 0 0 1-13.844-13.871C-15.17 133.733 2.6 51.9 61.06 22.366c13.132-6.86 26.265-13.72 41.47-14.57a95.928 95.928 0 0 1 7.705-.31" />
    <path fill="#361b11" d="M114.183 224.273c-.607 0-1.216-.006-1.827-.018a125.658 125.658 0 0 1-27.417-3.586c-9.168-2.253-18.206-5.597-26.634-10.14-.04-.023-.082-.044-.122-.066.04.022.082.043.122.066 8.428 4.543 17.466 7.887 26.634 10.14a125.658 125.658 0 0 0 27.417 3.586 93.696 93.696 0 0 0 1.827.018m41.74-8.66c25.405-11.34 45.221-34.015 55.467-60.276-10.246 26.26-30.062 48.936-55.467 60.275m62.139-85.66" />
    <path fill="#6f4323" d="M24.073 102.475c-6.098 0-11.558-4.111-13.912-10.472-1.72-4.644-.956-9.822 2.093-14.202 3.072-4.414 7.796-7.049 12.635-7.049 3.037 0 6.005 1.068 8.584 3.09 6.28 4.929 7.449 15.27 2.5 22.131-2.98 4.132-7.316 6.502-11.9 6.502" />
    <path fill="#351f17" d="M24.889 68.656c-5.524 0-10.891 2.972-14.355 7.948-3.447 4.952-4.3 10.83-2.339 16.127 2.663 7.192 8.895 11.84 15.878 11.84 5.265 0 10.222-2.687 13.6-7.372 5.576-7.731 4.217-19.416-2.907-25.006-2.952-2.313-6.367-3.537-9.877-3.537m0 4.19c2.428 0 4.936.8 7.29 2.646 5.578 4.375 6.16 13.62 2.095 19.256-2.767 3.837-6.516 5.632-10.201 5.632-4.946 0-9.775-3.235-11.947-9.104-3.228-8.717 4.288-18.43 12.763-18.43" />
    <path fill="#5b3221" d="M24.1 100.368c-3.54 0-7.02-1.66-9.514-4.756a11.664 11.664 0 0 0 5.305 1.292c3.678 0 7.42-1.788 10.182-5.619 3.5-4.856 3.544-12.385-.076-17.174a13.122 13.122 0 0 1 2.154 1.358l.002.002.026.021c3.18 2.495 4.738 6.573 4.734 10.664-.003 3.081-.892 6.17-2.64 8.592a15.506 15.506 0 0 1-1.596 1.89l-.004.003c-.004.006-.01.01-.014.014l-.01.01-.007.007-.017.017c-2.512 2.498-5.54 3.679-8.524 3.679" />
    <path fill="#2c1812" d="m32.642 96.672.007-.007c-.003.003-.004.006-.007.007m.017-.017c.004-.004.01-.008.014-.014l-.014.014m.018-.018a15.506 15.506 0 0 0 1.597-1.889c1.747-2.421 2.636-5.51 2.639-8.592-.003 3.081-.892 6.17-2.64 8.592a15.506 15.506 0 0 1-1.596 1.89m-.498-21.146-.026-.021.026.021m-.028-.023" />
    <path fill="#6f4323" d="M119.854 33.855c-3.284 0-6.234-.548-8.528-1.584-7.382-3.335-11.552-13.066-9.11-21.248 2.388-8.003 9.208-8.928 14.131-8.928.947 0 1.919.034 2.903.09 6.45.354 20.884 3.695 24.328 11.758 1.114 2.608 1.51 6.808-2.938 12.001-4.653 5.435-14.037 7.91-20.785 7.91h-.001" />
    <path fill="#351f17" d="M116.347 0c-3.223 0-13.027 0-16.137 10.423-2.776 9.292 1.824 19.95 10.253 23.757 2.564 1.157 5.81 1.77 9.39 1.77 10.347 0 18.694-4.34 22.38-8.643 5.146-6.01 4.62-11.034 3.271-14.188C141.811 4.473 127.511.54 119.366.092A54.423 54.423 0 0 0 116.347 0m0 4.19c.91 0 1.841.034 2.788.086 9.853.543 31.11 7.232 19.913 20.305-3.826 4.47-12.102 7.178-19.194 7.178-2.874 0-5.555-.446-7.666-1.398-6.76-3.054-10.02-11.85-7.964-18.74 1.84-6.16 6.558-7.43 12.123-7.43" />
    <path fill="#5b3221" d="M119.854 31.759c-2.38 0-4.628-.306-6.528-.95a13.185 13.185 0 0 1-1.138-.448c-1.578-.714-2.958-1.749-4.132-2.992 1.814.556 3.911.82 6.124.82 7.09 0 15.36-2.706 19.186-7.174 4.75-5.546 3.65-9.939.066-13.206 6.823 3.083 11.744 8.171 6.751 15.315l-.001.001c-.25.356-.524.72-.823 1.086l-.001.001-.075.09-.001.002-.019.023s.001-.002 0 0l-.056.068-.004.004-.015.018c0 .002-.002.002-.004.004l-.016.02a1.287 1.287 0 0 1-.04.047l-.002.004-.016.017-.004.006a.141.141 0 0 0-.014.016l-.006.006-.014.016c0 .003-.004.004-.005.006-.005.008-.012.014-.019.022-3.826 4.47-12.102 7.178-19.194 7.178" />
    <path fill="#2c1812" d="M113.326 30.808a13.185 13.185 0 0 0 0 0M139.068 24.56c0-.002.003-.003.004-.006-.002.003-.002.004-.005.006m.019-.022.006-.006-.006.006m.02-.022.004-.006-.004.006m.02-.023.002-.005c0 .001-.002.002-.002.005m.04-.05a.003.003 0 0 0 .002-.002c0 .001 0 .003-.002.003m.018-.022.004-.004c0 .002-.002.002-.004.004m.02-.022c0-.002.002-.003.003-.004l-.004.004m.06-.072c.001-.002 0 0 0 0m.019-.023.001-.001-.001.001m.076-.092.001-.001-.001.001m.824-1.087h.001-.001" />
    <path fill="#6f4323" d="M155.49 180.425c-3.612 0-9.93-1.488-11.634-11.452-1-5.855.843-12.416 4.815-17.125 3.152-3.737 7.184-5.796 11.353-5.796 3.474 0 6.798 1.39 9.882 4.133 4.044 3.598 5.896 8.87 5.081 14.466-.852 5.84-4.435 10.766-9.583 13.176-3.686 1.724-7.022 2.598-9.914 2.598" />
    <path fill="#351f17" d="M160.026 143.956c-4.799 0-9.399 2.323-12.958 6.541-4.357 5.168-6.38 12.383-5.277 18.83 1.435 8.385 6.427 13.195 13.699 13.195 3.201 0 6.836-.942 10.802-2.797 5.79-2.71 9.815-8.23 10.768-14.772.904-6.213-1.249-12.32-5.762-16.333-3.43-3.05-7.328-4.664-11.272-4.664m0 4.19c2.741 0 5.646 1.078 8.488 3.606 7.71 6.858 5.157 19.893-3.998 24.176-3.268 1.53-6.34 2.402-9.026 2.402-4.823 0-8.388-2.817-9.568-9.71-1.655-9.67 5.413-20.473 14.104-20.473" />
    <path fill="#5b3221" d="M155.52 178.318c-2.342 0-4.39-.663-6.013-2.133.273.019.552.028.836.028 2.681 0 5.744-.857 9.008-2.384 9.155-4.28 11.708-17.318 3.997-24.176a17.096 17.096 0 0 0-1.789-1.382c2.143.314 4.356 1.292 6.54 3.122.003.003.005.006.01.008.003.004.007.008.013.011.006.007.013.012.021.019l.007.005a20.936 20.936 0 0 1 .364.316c3.124 2.778 4.564 6.573 4.561 10.388-.005 5.599-3.115 11.241-8.559 13.788l-.076.036c-3.23 1.503-6.265 2.354-8.92 2.354" />
    <path fill="#2c1812" d="m164.44 175.964.076-.036c5.444-2.547 8.554-8.19 8.56-13.788-.006 5.599-3.116 11.241-8.56 13.788l-.076.036m3.703-24.533c-.008-.007-.015-.012-.021-.019.006.007.013.012.021.019m-.035-.03a.058.058 0 0 1-.009-.008c.003.003.005.006.01.008" />
    <path fill="#6f4323" d="M164.026 70.627c-7.612 0-12.272-5.682-12.943-11.294-.717-6.014 2.888-10.886 9.185-12.413a13.156 13.156 0 0 1 3.094-.377c7.292 0 12.23 6.212 12.79 12.217.547 5.887-3.065 10.435-9.204 11.588-.985.185-1.969.279-2.92.279h-.002" />
    <path fill="#351f17" d="M163.362 44.447c-1.184 0-2.39.146-3.587.437-7.283 1.765-11.612 7.672-10.772 14.699.78 6.53 6.19 13.14 15.023 13.14 1.082 0 2.196-.107 3.31-.316 7.278-1.367 11.556-6.8 10.9-13.842-.822-8.837-8.209-14.118-14.874-14.118m0 4.19c10.878 0 16.001 17.247 3.2 19.651-.88.165-1.727.244-2.536.244-11.8 0-15.74-16.552-3.263-19.576a11.004 11.004 0 0 1 2.599-.319" />
    <path fill="#5b3221" d="M164.03 68.53c-2.77 0-5.108-.913-6.903-2.349 1.13.384 2.373.602 3.72.602.799 0 1.635-.078 2.505-.24 9.92-1.864 9.076-12.638 3.13-17.394 6.053 2.004 9.318 9.582 6.73 14.656l-.002.003c-.932 1.821-2.615 3.32-5.195 4.121-.001.002-.001.002-.003.002-.009.002-.018.006-.029.01h-.005l-.027.008-.007.003-.025.008-.008.001-.025.008-.008.003-.028.008-.004.001a.311.311 0 0 1-.034.01l-.008.002c-.008.003-.016.004-.022.007a.066.066 0 0 0-.018.005l-.014.004-.019.006a.168.168 0 0 0-.013.004l-.02.005-.012.004-.02.005c-.004.002-.008.002-.014.003-.005.003-.013.004-.02.005-.002.002-.008.003-.012.004l-.02.006a.031.031 0 0 1-.01.002l-.023.007h-.003c-.04.012-.08.023-.12.032l-.002.001-.028.007-.006.001c-.009.003-.017.006-.026.007l-.007.001a.178.178 0 0 1-.025.007l-.007.003a.156.156 0 0 0-.027.006h-.004l-.188.046h-.002l-.028.006-.006.002-.026.006c-.003 0-.004 0-.007.002-.01.001-.017.004-.027.006h-.006a.172.172 0 0 1-.028.007l-.004.001-.03.007c-.042.01-.085.017-.126.027l-.006.001a.171.171 0 0 0-.025.005l-.01.002-.023.005-.012.003a.638.638 0 0 0-.022.004l-.013.002-.021.004a.069.069 0 0 1-.015.003l-.02.004-.016.004a.09.09 0 0 0-.019.003l-.02.004a.069.069 0 0 1-.014.002c-.012.003-.024.006-.036.007-.879.165-1.724.243-2.532.243" />
    <path fill="#2c1812" d="M166.562 68.288c.012-.001.024-.004.036-.007-.012.003-.024.006-.036.007m.05-.01c.007 0 .014-.002.02-.003l-.02.004m.04-.007.015-.004-.016.004m.036-.008.015-.003-.015.003m.036-.007c.004 0 .008 0 .013-.002l-.013.002m.035-.006.012-.003-.012.003m.036-.008.01-.002-.01.002m.034-.007.006-.001-.006.001m.131-.028h.001m.03-.007h.004-.004m.032-.008h.006-.006m.033-.006c.003-.002.004-.002.007-.002l-.007.002m.033-.008.006-.002c-.002.002-.003.002-.006.002m.034-.008h.002-.002m.19-.046h.004-.004m.031-.006.007-.003-.007.003m.032-.01h.007-.007m.033-.008h.006-.006m.034-.008h.001-.001m.122-.033h.003-.003M167.62 68.045c.004 0 .01-.002.012-.004-.002.002-.008.003-.012.004m.032-.009c.006-.001.01-.001.014-.003-.004.002-.008.002-.014.003m.034-.008.012-.004-.012.004m.032-.01a.168.168 0 0 1 .013-.003c-.004.001-.01.002-.013.004m.032-.01c.005 0 .01-.002.014-.004l-.014.004m.032-.009c.006-.003.014-.004.022-.007-.008.003-.016.004-.022.007m.03-.01a.311.311 0 0 0 .034-.009l-.034.01m.038-.01.028-.009-.028.008m.036-.01.025-.009-.025.008m.033-.009.025-.008-.025.008m.032-.01.027-.009-.027.008m.032-.009.03-.01-.03.01m.032-.01c2.58-.802 4.263-2.3 5.195-4.122-.93 1.821-2.615 3.319-5.195 4.121m5.195-4.12.001-.004-.001.003" />
    <path fill="#6f4323" d="M84.95 82.763c-3.69 0-6.955-2.015-9.19-5.674-2.723-4.456-2.931-9.425-.571-13.633 2.192-3.91 6.317-6.436 10.506-6.436 3.755 0 7.162 1.957 9.596 5.51 2.722 3.973 2.983 8.717.718 13.015-2.276 4.318-6.72 7.218-11.06 7.218" />
    <path fill="#351f17" d="M85.695 54.924c-4.934 0-9.777 2.947-12.334 7.507-2.742 4.888-2.52 10.628.61 15.75 2.63 4.307 6.53 6.678 10.979 6.678 5.175 0 10.243-3.272 12.912-8.336 2.601-4.938 2.286-10.61-.843-15.178-2.836-4.14-6.858-6.42-11.324-6.42m0 4.19c2.782 0 5.644 1.356 7.867 4.6 5.292 7.724-1.616 16.953-8.612 16.953-2.681 0-5.376-1.356-7.401-4.67-5.194-8.498 1.225-16.883 8.146-16.883" />
    <path fill="#5b3221" d="M84.95 80.665c-2.367 0-4.745-1.057-6.664-3.586 1.423 1.014 2.972 1.464 4.516 1.462 6.995 0 13.899-9.22 8.607-16.942-.176-.258-.36-.49-.546-.724.924.681 1.804 1.564 2.6 2.697a.018.018 0 0 0 .004.005l.012.016a.17.17 0 0 0 .018.026v.001l.04.056.01.017a.12.12 0 0 1 .015.022c1.385 2.021 1.935 4.145 1.865 6.181v.023c-.208 5.73-5.318 10.748-10.477 10.746" />
    <path fill="#2c1812" d="M95.427 69.919V69.9v.018m0-.023c.07-2.036-.48-4.16-1.865-6.181 1.385 2.021 1.935 4.145 1.865 6.181m-1.88-6.203-.01-.017.01.017m-.01-.017-.04-.056.04.056m-.04-.057a.17.17 0 0 1-.018-.026c.006.008.01.018.018.026m-.03-.042-.004-.005a.018.018 0 0 0 .004.005" />
    <path fill="#6f4323" d="M36.434 195.188c-8.043-.001-16.095-5.825-18.332-13.261-1.417-4.707-.332-9.96 2.979-14.414 3.48-4.684 8.776-7.593 13.82-7.593 3.004 0 5.838 1.03 8.2 2.98 4.918 4.064 7.596 12.575 6.364 20.237-.894 5.55-3.664 9.493-7.803 11.107-1.605.625-3.365.944-5.228.944" />
    <path fill="#351f17" d="M34.9 157.93c-5.66 0-11.567 3.217-15.417 8.395-3.69 4.964-4.888 10.86-3.288 16.175 2.519 8.368 11.219 14.677 20.239 14.677 2.112 0 4.113-.362 5.952-1.078 4.752-1.852 8.05-6.462 9.044-12.647 1.337-8.313-1.633-17.601-7.063-22.087-2.721-2.248-5.994-3.436-9.466-3.436m0 3.982c2.409 0 4.802.765 6.932 2.524 7.62 6.295 8.497 24.295-.894 27.954-1.408.55-2.936.807-4.505.807-6.763 0-14.305-4.796-16.427-11.843-2.81-9.333 6.143-19.442 14.894-19.442" />
    <path fill="#5b3221" d="M36.451 193.193c-2.5 0-5.11-.658-7.512-1.841.31.019.619.028.926.028 1.554 0 3.069-.244 4.462-.788 9.39-3.657 8.515-21.659.892-27.953-.324-.268-.668-.452-1.004-.676.236-.014.47-.022.707-.022 2.372 0 4.73.723 6.832 2.43.027.02.052.042.079.064 3.81 3.148 5.934 9.22 5.933 14.966-.003 5.744-2.13 11.16-6.827 12.988-.296.116-.598.219-.905.308a12.68 12.68 0 0 1-3.583.496" />
    <path fill="#2c1812" d="M40.034 192.697c.307-.089.61-.192.905-.308 4.696-1.829 6.824-7.244 6.827-12.988-.003 5.744-2.13 11.16-6.827 12.988-.296.116-.598.219-.905.308m1.799-28.262c-.027-.022-.052-.043-.08-.064.028.02.053.042.08.064" />
    <path fill="#6f4323" d="M139.002 222.475c-5.306 0-8.934-2.775-9.956-7.612-1.004-4.748.072-9.508 2.953-13.06 2.467-3.044 6.004-4.788 9.704-4.788 2.753 0 5.55.965 8.09 2.791 3.702 2.666 5.74 6.655 5.449 10.671-.287 3.967-2.734 7.427-6.712 9.495-3.062 1.59-6.535 2.503-9.527 2.503h-.001" />
    <path fill="#351f17" d="M141.703 194.918c-4.335 0-8.465 2.029-11.332 5.565-3.28 4.045-4.51 9.444-3.376 14.813 1.228 5.808 5.717 9.275 12.007 9.275 3.32 0 7.144-.999 10.493-2.74 4.64-2.411 7.496-6.494 7.837-11.202.344-4.748-2.017-9.429-6.316-12.523-2.898-2.084-6.118-3.188-9.313-3.188m0 4.192c2.199 0 4.55.731 6.865 2.398 6.436 4.632 6.152 12.885-1.005 16.604-2.56 1.33-5.697 2.268-8.561 2.268-3.723 0-6.984-1.586-7.907-5.95-1.716-8.12 3.707-15.32 10.608-15.32" />
    <path fill="#5b3221" d="M139.036 220.367c-1.845 0-3.578-.388-4.972-1.31.088.002.175.003.263.003 2.863 0 5.999-.93 8.557-2.259 7.158-3.718 7.442-11.973 1.006-16.604a14.45 14.45 0 0 0-1.686-1.038c2.04.101 4.186.796 6.314 2.313l.001.001.023.016.026.019c3.067 2.207 4.608 5.237 4.607 8.207-.003 3.261-1.865 6.45-5.612 8.397l-.272.139c-2.5 1.252-5.503 2.116-8.255 2.116" />
    <path fill="#2c1812" d="M147.291 218.25c.092-.045.183-.091.272-.138 3.747-1.947 5.61-5.136 5.612-8.397-.003 3.261-1.865 6.45-5.612 8.397l-.272.139m1.277-16.743-.026-.019.026.019m-.049-.035-.001-.001.001.001" />
    <path fill="#6f4323" d="M88.851 200.747c-3.35 0-6.24-1.06-8.358-3.066-3.86-3.65-4.916-8.966-2.826-14.218 2.302-5.783 7.812-9.822 13.399-9.822.475 0 .953.03 1.435.086 5.892.7 10.445 3.814 12.178 8.33 1.64 4.272.481 9.118-3.18 13.296-2.825 3.226-7.908 5.394-12.648 5.394" />
    <path fill="#351f17" d="M91.066 171.547c-6.525 0-12.693 4.477-15.345 11.141-2.42 6.079-1.174 12.253 3.332 16.516 2.516 2.38 5.904 3.637 9.798 3.637 5.308 0 11.025-2.453 14.224-6.108 4.19-4.782 5.488-10.405 3.56-15.427-2.017-5.255-7.21-8.866-13.888-9.66-.556-.066-1.121-.1-1.681-.1m0 4.191c.393 0 .79.023 1.188.071 10.118 1.202 14.708 10.13 7.67 18.165-2.365 2.699-6.845 4.678-11.073 4.678-2.577 0-5.062-.735-6.917-2.49-7.748-7.33-.248-20.424 9.132-20.424" />
    <path fill="#5b3221" d="M88.851 198.65c-2.577 0-5.062-.734-6.917-2.49l-.064-.061c-.437-.42-.813-.866-1.155-1.32.94.237 1.924.348 2.922.346 4.225 0 8.694-1.968 11.057-4.665 4.319-4.93 4.245-10.188 1.217-13.8 7.417 2.657 10.107 10.25 4.103 17.21h-.002a.172.172 0 0 0-.014.018c-.003.001-.004.004-.006.006l-.013.015-.005.007-.014.013-.008.01c-.004.005-.006.01-.01.012l-.019.022c-1 1.142-2.377 2.154-3.954 2.943-2.154 1.076-4.678 1.735-7.118 1.735" />
    <path fill="#2c1812" d="M95.969 196.916c1.577-.79 2.954-1.801 3.954-2.943l.019-.022-.019.022c-1 1.142-2.377 2.154-3.954 2.943m-14.035-.756-.064-.061.064.061m18.018-2.22.008-.01-.008.01m.022-.024.005-.007-.005.007m.018-.022c.002-.002.003-.005.006-.006l-.006.006m.02-.023s0-.002.002-.002c-.002 0-.002.002-.002.002" />
    <path fill="#6f4323" d="M203.984 154.718c-3.349 0-6.24-1.058-8.358-3.063-3.86-3.652-4.916-8.968-2.827-14.22 2.303-5.782 7.812-9.82 13.4-9.82.475 0 .953.028 1.435.085 5.892.7 10.444 3.815 12.178 8.332 1.64 4.27.482 9.116-3.18 13.295-2.826 3.225-7.909 5.391-12.648 5.391" />
    <path fill="#351f17" d="M206.2 125.52c-6.528 0-12.694 4.477-15.348 11.14-2.418 6.079-1.173 12.253 3.334 16.517 2.516 2.38 5.904 3.638 9.798 3.638 5.307 0 11.024-2.454 14.224-6.107 4.191-4.784 5.488-10.405 3.56-15.428-2.017-5.255-7.209-8.867-13.888-9.661a14.458 14.458 0 0 0-1.68-.099m0 4.19c.391 0 .788.023 1.186.071 10.118 1.202 14.71 10.131 7.67 18.164-2.365 2.7-6.844 4.68-11.072 4.68-2.578 0-5.062-.737-6.918-2.492-7.747-7.329-.247-20.422 9.133-20.422" />
    <path fill="#5b3221" d="M203.984 152.624c-.518 0-1.033-.03-1.54-.092-2.012-.245-3.896-.996-5.378-2.399-.223-.212-.387-.442-.584-.661 1.27.487 2.654.707 4.068.707 4.222 0 8.692-1.97 11.054-4.666 4.55-5.193 4.22-10.746.703-14.358 6.46 3.04 8.501 10.186 2.784 16.752l-.004.004-.013.014c-.006.007-.01.014-.018.02-2 2.284-5.514 4.052-9.11 4.543-.654.09-1.31.136-1.962.136" />
    <path fill="#2c1812" d="M203.983 152.624a12.787 12.787 0 0 1 .001 0m11.072-4.679a.232.232 0 0 0 .018-.02c-.006.007-.01.014-.018.02m.031-.034.004-.004-.004.004" />
    <path fill="#6f4323" d="M53.043 52.012c-5.27 0-9.898-1.852-13.03-5.213-5.958-6.396-1.46-17.347 3.02-23.146 2.818-3.65 8.19-5.832 14.368-5.832 3.51 0 6.856.74 9.417 2.086 3.167 1.661 5.344 4.63 6.301 8.584 1.236 5.114.164 11.258-2.67 15.286-3.52 5.003-10.351 8.235-17.404 8.235h-.002" />
    <path fill="#351f17" d="M57.4 15.725c-6.822 0-12.813 2.486-16.026 6.648-5.888 7.627-9.307 18.97-2.893 25.854 3.532 3.792 8.704 5.881 14.562 5.881 7.715 0 15.22-3.581 19.12-9.125 3.21-4.563 4.384-11.23 2.992-16.984-1.085-4.494-3.701-8.026-7.362-9.948-2.86-1.499-6.548-2.326-10.392-2.326m0 4.192c3.096 0 6.128.63 8.444 1.844 7.105 3.731 6.934 15.062 2.892 20.811-3.2 4.547-9.552 7.345-15.694 7.345-4.332 0-8.558-1.393-11.497-4.548-5.039-5.409-.868-15.237 3.145-20.434 2.63-3.406 7.752-5.018 12.71-5.018" />
    <path fill="#5b3221" d="M53.075 49.903c-4.166 0-8.238-1.29-11.162-4.194 1.668.5 3.436.735 5.22.735 6.137 0 12.484-2.792 15.68-7.336 3.405-4.843 4.045-13.63-.078-18.513 1.122.296 2.176.678 3.11 1.166 3.997 2.1 5.69 6.602 5.689 11.164-.001 3.548-1.03 7.131-2.797 9.647-3.196 4.541-9.532 7.33-15.662 7.33" />
    <path fill="#6f4323" d="M202.492 104.203c-5.128-.002-9.66-1.956-12.762-5.506-5.592-6.4-1.73-17.042 2.23-22.634 2.431-3.434 7.168-5.483 12.671-5.483 3.5 0 6.85.83 9.433 2.336 2.978 1.733 5.056 4.744 6.01 8.703 1.208 5.009.362 10.956-2.102 14.8-3.033 4.728-9.109 7.784-15.478 7.784h-.002" />
    <path fill="#351f17" d="M204.631 68.576c-6.152 0-11.5 2.367-14.307 6.33-2.382 3.365-4.197 7.534-4.977 11.44-1.104 5.529-.11 10.255 2.873 13.67 3.49 3.992 8.558 6.19 14.272 6.19 7.036 0 13.775-3.417 17.167-8.705 2.784-4.341 3.71-10.76 2.363-16.352-1.086-4.502-3.488-7.949-6.95-9.965-2.884-1.683-6.592-2.608-10.44-2.608m0 4.008c3.055 0 6.106.712 8.423 2.063 6.667 3.884 6.812 15.104 3.23 20.689-2.749 4.287-8.285 6.863-13.793 6.863-4.174 0-8.336-1.482-11.253-4.82-4.803-5.495-1.213-15.118 2.357-20.158 2.24-3.165 6.643-4.637 11.036-4.637" />
    <path fill="#5b3221" d="M202.51 102.19c-4.099 0-8.184-1.426-11.095-4.635 2.12 1.002 4.463 1.47 6.81 1.47 5.507 0 11.042-2.576 13.79-6.86 3.004-4.682 3.37-13.31-.513-18.272.542.228 1.07.471 1.553.754 3.893 2.268 5.563 7.038 5.564 11.726.001 3.34-.843 6.64-2.333 8.963a12.897 12.897 0 0 1-2.083 2.475c-2.995 2.778-7.352 4.38-11.693 4.38" />
    <path fill="#2c1812" d="M214.203 97.81c.001 0 .004-.003.005-.006a.03.03 0 0 1-.005.007m.021-.02a12.897 12.897 0 0 0 2.062-2.455c1.49-2.323 2.334-5.623 2.333-8.963.001 3.34-.843 6.64-2.333 8.963a12.856 12.856 0 0 1-2.062 2.455" />
    <path fill="#6f4323" d="M39.713 143.56c-7.995-.001-14.396-6.873-15.742-13.241-1.27-6.008 1.543-11.175 7.524-13.822a12.758 12.758 0 0 1 5.195-1.117c7.628 0 13.799 6.716 15.357 13.208 1.392 5.793-.813 10.799-5.9 13.392-2.056 1.048-4.22 1.58-6.433 1.58h-.001" />
    <path fill="#351f17" d="M36.69 113.284a14.84 14.84 0 0 0-6.043 1.297c-6.85 3.032-10.193 9.228-8.725 16.172 1.548 7.326 8.625 14.902 17.79 14.902 2.549 0 5.033-.608 7.387-1.808 5.918-3.018 8.595-9.051 6.987-15.747-1.75-7.283-8.735-14.816-17.396-14.816m0 4.192c10.881 0 19.635 16.964 8.505 22.637-1.837.936-3.688 1.351-5.482 1.351-11.542 0-20.647-17.175-7.37-23.05a10.657 10.657 0 0 1 4.347-.938" />
    <path fill="#5b3221" d="M39.733 141.459c-2.178 0-4.268-.612-6.14-1.642.146.006.292.008.438.008 1.79 0 3.636-.402 5.468-1.336 9.023-4.6 4.976-16.618-2.677-21.002 7.079.089 13.223 7.326 13.523 13.904v.046c.138 3.323-1.22 6.47-4.704 8.438l-.028.014-.004.003a.216.216 0 0 1-.024.013l-.007.004-.021.012-.011.006-.02.012a.04.04 0 0 0-.01.005l-.022.012a.04.04 0 0 0-.01.005l-.017.01-.016.008-.012.006-.02.011a.076.076 0 0 0-.01.005l-.02.012a.047.047 0 0 0-.012.006l-.02.01-.016.008-.016.01-.03.014-.002.002-.023.012-.01.005-.013.007-.052.026c-.293.15-.588.287-.882.41-1.54.645-3.08.937-4.58.936" />
    <path fill="#2c1812" d="M44.313 140.523a12.752 12.752 0 0 1 0 0m.934-.436.012-.007-.012.007m.023-.012.023-.012-.023.012m.025-.014.03-.014a.3.3 0 0 1-.03.014m.046-.024.016-.008-.016.008m.036-.018.012-.006-.012.006m.063-.034.011-.006-.012.006m.028-.014a.1.1 0 0 1 .016-.01l-.016.01m.027-.015.021-.012-.021.012m.032-.017.02-.012-.02.012m.03-.018.022-.012-.021.012m.028-.016.024-.013c-.008.004-.016.01-.024.013m.028-.016.028-.014-.028.014m.028-.014c3.485-1.968 4.842-5.115 4.705-8.438.137 3.322-1.22 6.47-4.705 8.438m4.705-8.439v-.021.021m-.001-.037v-.008.008" />
    <path fill="#351f17" d="M95.123 126.928c2.262 6.404-1.097 13.428-7.5 15.688-6.402 2.261-13.426-1.096-15.688-7.499-2.261-6.402 1.098-13.426 7.5-15.688 6.403-2.261 13.427 1.096 15.688 7.499" />
    <path class="cookie__eye" fill="#fff" d="M80.37 126.579a3.925 3.925 0 0 1-2.396 5.009 3.925 3.925 0 1 1-2.615-7.403 3.926 3.926 0 0 1 5.01 2.394M82.098 132.313a1.478 1.478 0 1 1-2.788.983 1.478 1.478 0 0 1 2.788-.983M83.34 127.705a.929.929 0 0 1-.566 1.183.925.925 0 1 1-.616-1.747.927.927 0 0 1 1.183.564" />
    <path fill="#351f17" d="M156.404 105.287c2.262 6.404-1.096 13.426-7.5 15.688-6.402 2.261-13.425-1.096-15.686-7.5-2.262-6.403 1.096-13.426 7.497-15.687 6.404-2.261 13.428 1.096 15.69 7.499" />
    <path class="cookie__eye" fill="#fff" d="M141.652 104.937a3.927 3.927 0 1 1-7.406 2.614 3.927 3.927 0 0 1 7.406-2.614M143.38 110.672a1.477 1.477 0 1 1-2.786.984 1.477 1.477 0 0 1 2.785-.984M144.622 106.064a.927.927 0 1 1-1.75.617.927.927 0 0 1 1.75-.617" />
    <path fill="#ef3644" d="M115.724 134.981a9.672 9.672 0 0 1-9.105-6.445 1.093 1.093 0 0 1-.061-.435c.05-.813.95-2.981 8.192-5.538 3.185-1.126 5.644-1.362 7.144-1.362 1.337 0 2.086.183 2.168.203.357.092.645.355.766.701 1.775 5.022-.866 10.55-5.888 12.323a9.645 9.645 0 0 1-3.214.553h-.002" />
    <path fill="#351f17" d="M121.894 120.097c-1.587 0-4.179.248-7.512 1.424-7.202 2.544-8.83 4.946-8.926 6.512-.018.296.024.592.122.871a10.781 10.781 0 0 0 10.146 7.181c1.22 0 2.426-.208 3.583-.616a10.697 10.697 0 0 0 6.125-5.506 10.687 10.687 0 0 0 .438-8.224 2.205 2.205 0 0 0-1.535-1.403c-.155-.04-1-.239-2.441-.239zm0 2.208c1.236 0 1.894.168 1.894.168a8.554 8.554 0 0 1-8.064 11.404 8.56 8.56 0 0 1-8.065-5.708s.123-1.976 7.457-4.566c2.995-1.058 5.3-1.298 6.778-1.298" />
    <path fill="#fff" d="M108.84 131.448c-.354 0-.732-.181-.94-.468a9.613 9.613 0 0 1-1.28-2.444 1.093 1.093 0 0 1-.062-.435c.05-.813.95-2.981 8.192-5.538 3.185-1.126 5.644-1.362 7.144-1.362 1.337 0 2.086.183 2.168.203.357.092.645.355.766.701a9.62 9.62 0 0 1 .542 2.75c.014.301-.106.616-.315.834-.872.914-15.377 5.759-16.215 5.759" />
    <path fill="#351f17" d="M121.894 120.097c-1.587 0-4.179.248-7.512 1.424-7.202 2.544-8.83 4.946-8.926 6.512-.018.296.024.592.122.871.344.972.825 1.888 1.43 2.724a2.304 2.304 0 0 0 1.832.924c.372 0 1.062 0 8.62-2.66 7.694-2.708 8.002-3.03 8.392-3.441a2.253 2.253 0 0 0 .62-1.644c-.05-1.05-.253-2.08-.602-3.07a2.205 2.205 0 0 0-1.535-1.401c-.155-.04-1-.239-2.441-.239zm0 2.208c1.236 0 1.894.168 1.894.168.286.806.44 1.624.48 2.435.014.317-14.492 5.436-15.428 5.436l-.045-.01a8.487 8.487 0 0 1-1.136-2.165s.123-1.976 7.457-4.566c2.995-1.058 5.3-1.298 6.778-1.298M134.956 91.607l.003-.003c.075-.061 1.096-.884 2.756-1.679 1.661-.797 3.953-1.561 6.587-1.56 2.113.003 4.452.482 6.941 1.854a1.103 1.103 0 1 0 1.067-1.932c-2.815-1.556-5.556-2.131-8.008-2.128-3.162.001-5.835.936-7.72 1.862-1.886.928-2.995 1.854-3.044 1.895a1.105 1.105 0 0 0 1.418 1.69M79.63 108.955l-.067-.002c-.457.003-3.237.05-6.49 1.38-3.244 1.322-6.988 4.004-9.078 9.142a1.103 1.103 0 1 0 2.044.833c1.85-4.516 5.015-6.75 7.872-7.933 2.852-1.172 5.375-1.216 5.652-1.215h.019a1.103 1.103 0 1 0 .05-2.205" />
</svg>

正如上面代码所示，这个 SVG 图形是由很多个 <path> 元素绘制而成，它是一个纯静态的图形。将其添加到横幅中，并应用一些基本的 CSS，整个页面效果看上去死气沉沉，并没有任何突出和吸引人的效果：

HTML
<aside class="cookie-notice">
    <div class="cookie-notice__inner">
        <div>
            <h2 class="cookie-notice__title">Have a cookie!</h2>
            <p class="cookie-notice__content">We use cookies to make your experience on this website better. <a target="_blank" rel="noopener noreferrer" href="https://www.freepik.com/free-vector/kawaii-fast-food-cute-cookie-milk-illustration_5769140.htm#query=cookie%20milk&position=21&from_view=search&track=sph">Image by gstudioimagen</a> on Freepik.</p>
            <div class="cookie-notice__actions">
                <button class="cookie-notice__button">Accept</button>
                <button class="cookie-notice__button">Decline</button>
            </div>
        </div>
    
        <figure role="presentation" class="cookie-notice__graphic-container">
            <span class="cookie-notice__shadow"></span>
            <svg class="cookie-notice__graphic" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 223.233 228.464">
                <path fill="#f8c256" d="M114.184 226.368c-.622 0-1.244-.005-1.868-.017a127.269 127.269 0 0 1-27.877-3.647c-9.71-2.387-18.838-5.863-27.13-10.33a104.407 104.407 0 0 1-16.216-10.97 102.99 102.99 0 0 1-14.132-14.159C5.82 162.03-2.39 128.457 4.454 95.155c6.781-33.002 27.068-60.212 55.661-74.658C73.201 13.661 86.757 6.58 102.414 5.703a98.493 98.493 0 0 1 7.822-.312c5.052 0 10.163.396 15.188 1.178l.188.03.18.062c4.151 1.447 8.552 2.631 12.81 3.776 8.73 2.35 17.76 4.78 25.617 9.668 4.319 2.876 8.905 6.291 13.687 10.186 4.473 3.645 9.13 7.72 13.844 12.112l.118.121a111.703 111.703 0 0 1 12.98 17.35 118.893 118.893 0 0 1 9.78 20.251c11.184 28.35 7.83 62.775-8.989 92.05-16.48 28.686-42.768 47.72-72.124 52.221a95.657 95.657 0 0 1-19.33 1.972" />
                <path fill="#351f17" d="M110.238 3.295c-2.656 0-5.344.108-7.992.318-16.088.916-29.832 8.095-43.125 15.04C30.003 33.362 9.31 61.1 2.4 94.731c-6.971 33.935 1.4 68.15 22.969 93.878a104.943 104.943 0 0 0 14.39 14.413 106.635 106.635 0 0 0 16.53 11.18c8.473 4.568 17.765 8.107 27.65 10.536a129.378 129.378 0 0 0 28.335 3.706 98.242 98.242 0 0 0 21.664-1.995c29.947-4.626 56.737-24.023 73.517-53.232 17.124-29.806 20.534-64.893 9.123-93.86a120.915 120.915 0 0 0-9.941-20.571 113.778 113.778 0 0 0-13.222-17.676l-.114-.126-.123-.114c-4.748-4.426-9.44-8.53-13.948-12.204-4.835-3.938-9.475-7.392-13.795-10.27l-.054-.036-.055-.034c-8.121-5.054-17.303-7.524-26.181-9.914-4.22-1.134-8.584-2.309-12.664-3.73l-.359-.126-.376-.057c-5.132-.8-10.35-1.205-15.51-1.205m0 4.19c4.9 0 9.863.376 14.866 1.155 12.67 4.415 26.617 6.156 38.01 13.244 4.36 2.905 8.893 6.304 13.47 10.032 4.577 3.73 9.199 7.79 13.737 12.02a109.344 109.344 0 0 1 12.735 17.024 116.497 116.497 0 0 1 9.61 19.895c22.766 57.713-17.67 131.994-79.467 141.47a93.765 93.765 0 0 1-20.842 1.93 125.658 125.658 0 0 1-27.417-3.586c-9.168-2.253-18.206-5.597-26.634-10.14a102.182 102.182 0 0 1-15.88-10.742 100.606 100.606 0 0 1-13.844-13.871C-15.17 133.733 2.6 51.9 61.06 22.366c13.132-6.86 26.265-13.72 41.47-14.57a95.928 95.928 0 0 1 7.705-.31" />
                <path fill="#361b11" d="M114.183 224.273c-.607 0-1.216-.006-1.827-.018a125.658 125.658 0 0 1-27.417-3.586c-9.168-2.253-18.206-5.597-26.634-10.14-.04-.023-.082-.044-.122-.066.04.022.082.043.122.066 8.428 4.543 17.466 7.887 26.634 10.14a125.658 125.658 0 0 0 27.417 3.586 93.696 93.696 0 0 0 1.827.018m41.74-8.66c25.405-11.34 45.221-34.015 55.467-60.276-10.246 26.26-30.062 48.936-55.467 60.275m62.139-85.66" />
                <path fill="#6f4323" d="M24.073 102.475c-6.098 0-11.558-4.111-13.912-10.472-1.72-4.644-.956-9.822 2.093-14.202 3.072-4.414 7.796-7.049 12.635-7.049 3.037 0 6.005 1.068 8.584 3.09 6.28 4.929 7.449 15.27 2.5 22.131-2.98 4.132-7.316 6.502-11.9 6.502" />
                <path fill="#351f17" d="M24.889 68.656c-5.524 0-10.891 2.972-14.355 7.948-3.447 4.952-4.3 10.83-2.339 16.127 2.663 7.192 8.895 11.84 15.878 11.84 5.265 0 10.222-2.687 13.6-7.372 5.576-7.731 4.217-19.416-2.907-25.006-2.952-2.313-6.367-3.537-9.877-3.537m0 4.19c2.428 0 4.936.8 7.29 2.646 5.578 4.375 6.16 13.62 2.095 19.256-2.767 3.837-6.516 5.632-10.201 5.632-4.946 0-9.775-3.235-11.947-9.104-3.228-8.717 4.288-18.43 12.763-18.43" />
                <path fill="#5b3221" d="M24.1 100.368c-3.54 0-7.02-1.66-9.514-4.756a11.664 11.664 0 0 0 5.305 1.292c3.678 0 7.42-1.788 10.182-5.619 3.5-4.856 3.544-12.385-.076-17.174a13.122 13.122 0 0 1 2.154 1.358l.002.002.026.021c3.18 2.495 4.738 6.573 4.734 10.664-.003 3.081-.892 6.17-2.64 8.592a15.506 15.506 0 0 1-1.596 1.89l-.004.003c-.004.006-.01.01-.014.014l-.01.01-.007.007-.017.017c-2.512 2.498-5.54 3.679-8.524 3.679" />
                <path fill="#2c1812" d="m32.642 96.672.007-.007c-.003.003-.004.006-.007.007m.017-.017c.004-.004.01-.008.014-.014l-.014.014m.018-.018a15.506 15.506 0 0 0 1.597-1.889c1.747-2.421 2.636-5.51 2.639-8.592-.003 3.081-.892 6.17-2.64 8.592a15.506 15.506 0 0 1-1.596 1.89m-.498-21.146-.026-.021.026.021m-.028-.023" />
                <path fill="#6f4323" d="M119.854 33.855c-3.284 0-6.234-.548-8.528-1.584-7.382-3.335-11.552-13.066-9.11-21.248 2.388-8.003 9.208-8.928 14.131-8.928.947 0 1.919.034 2.903.09 6.45.354 20.884 3.695 24.328 11.758 1.114 2.608 1.51 6.808-2.938 12.001-4.653 5.435-14.037 7.91-20.785 7.91h-.001" />
                <path fill="#351f17" d="M116.347 0c-3.223 0-13.027 0-16.137 10.423-2.776 9.292 1.824 19.95 10.253 23.757 2.564 1.157 5.81 1.77 9.39 1.77 10.347 0 18.694-4.34 22.38-8.643 5.146-6.01 4.62-11.034 3.271-14.188C141.811 4.473 127.511.54 119.366.092A54.423 54.423 0 0 0 116.347 0m0 4.19c.91 0 1.841.034 2.788.086 9.853.543 31.11 7.232 19.913 20.305-3.826 4.47-12.102 7.178-19.194 7.178-2.874 0-5.555-.446-7.666-1.398-6.76-3.054-10.02-11.85-7.964-18.74 1.84-6.16 6.558-7.43 12.123-7.43" />
                <path fill="#5b3221" d="M119.854 31.759c-2.38 0-4.628-.306-6.528-.95a13.185 13.185 0 0 1-1.138-.448c-1.578-.714-2.958-1.749-4.132-2.992 1.814.556 3.911.82 6.124.82 7.09 0 15.36-2.706 19.186-7.174 4.75-5.546 3.65-9.939.066-13.206 6.823 3.083 11.744 8.171 6.751 15.315l-.001.001c-.25.356-.524.72-.823 1.086l-.001.001-.075.09-.001.002-.019.023s.001-.002 0 0l-.056.068-.004.004-.015.018c0 .002-.002.002-.004.004l-.016.02a1.287 1.287 0 0 1-.04.047l-.002.004-.016.017-.004.006a.141.141 0 0 0-.014.016l-.006.006-.014.016c0 .003-.004.004-.005.006-.005.008-.012.014-.019.022-3.826 4.47-12.102 7.178-19.194 7.178" />
                <path fill="#2c1812" d="M113.326 30.808a13.185 13.185 0 0 0 0 0M139.068 24.56c0-.002.003-.003.004-.006-.002.003-.002.004-.005.006m.019-.022.006-.006-.006.006m.02-.022.004-.006-.004.006m.02-.023.002-.005c0 .001-.002.002-.002.005m.04-.05a.003.003 0 0 0 .002-.002c0 .001 0 .003-.002.003m.018-.022.004-.004c0 .002-.002.002-.004.004m.02-.022c0-.002.002-.003.003-.004l-.004.004m.06-.072c.001-.002 0 0 0 0m.019-.023.001-.001-.001.001m.076-.092.001-.001-.001.001m.824-1.087h.001-.001" />
                <path fill="#6f4323" d="M155.49 180.425c-3.612 0-9.93-1.488-11.634-11.452-1-5.855.843-12.416 4.815-17.125 3.152-3.737 7.184-5.796 11.353-5.796 3.474 0 6.798 1.39 9.882 4.133 4.044 3.598 5.896 8.87 5.081 14.466-.852 5.84-4.435 10.766-9.583 13.176-3.686 1.724-7.022 2.598-9.914 2.598" />
                <path fill="#351f17" d="M160.026 143.956c-4.799 0-9.399 2.323-12.958 6.541-4.357 5.168-6.38 12.383-5.277 18.83 1.435 8.385 6.427 13.195 13.699 13.195 3.201 0 6.836-.942 10.802-2.797 5.79-2.71 9.815-8.23 10.768-14.772.904-6.213-1.249-12.32-5.762-16.333-3.43-3.05-7.328-4.664-11.272-4.664m0 4.19c2.741 0 5.646 1.078 8.488 3.606 7.71 6.858 5.157 19.893-3.998 24.176-3.268 1.53-6.34 2.402-9.026 2.402-4.823 0-8.388-2.817-9.568-9.71-1.655-9.67 5.413-20.473 14.104-20.473" />
                <path fill="#5b3221" d="M155.52 178.318c-2.342 0-4.39-.663-6.013-2.133.273.019.552.028.836.028 2.681 0 5.744-.857 9.008-2.384 9.155-4.28 11.708-17.318 3.997-24.176a17.096 17.096 0 0 0-1.789-1.382c2.143.314 4.356 1.292 6.54 3.122.003.003.005.006.01.008.003.004.007.008.013.011.006.007.013.012.021.019l.007.005a20.936 20.936 0 0 1 .364.316c3.124 2.778 4.564 6.573 4.561 10.388-.005 5.599-3.115 11.241-8.559 13.788l-.076.036c-3.23 1.503-6.265 2.354-8.92 2.354" />
                <path fill="#2c1812" d="m164.44 175.964.076-.036c5.444-2.547 8.554-8.19 8.56-13.788-.006 5.599-3.116 11.241-8.56 13.788l-.076.036m3.703-24.533c-.008-.007-.015-.012-.021-.019.006.007.013.012.021.019m-.035-.03a.058.058 0 0 1-.009-.008c.003.003.005.006.01.008" />
                <path fill="#6f4323" d="M164.026 70.627c-7.612 0-12.272-5.682-12.943-11.294-.717-6.014 2.888-10.886 9.185-12.413a13.156 13.156 0 0 1 3.094-.377c7.292 0 12.23 6.212 12.79 12.217.547 5.887-3.065 10.435-9.204 11.588-.985.185-1.969.279-2.92.279h-.002" />
                <path fill="#351f17" d="M163.362 44.447c-1.184 0-2.39.146-3.587.437-7.283 1.765-11.612 7.672-10.772 14.699.78 6.53 6.19 13.14 15.023 13.14 1.082 0 2.196-.107 3.31-.316 7.278-1.367 11.556-6.8 10.9-13.842-.822-8.837-8.209-14.118-14.874-14.118m0 4.19c10.878 0 16.001 17.247 3.2 19.651-.88.165-1.727.244-2.536.244-11.8 0-15.74-16.552-3.263-19.576a11.004 11.004 0 0 1 2.599-.319" />
                <path fill="#5b3221" d="M164.03 68.53c-2.77 0-5.108-.913-6.903-2.349 1.13.384 2.373.602 3.72.602.799 0 1.635-.078 2.505-.24 9.92-1.864 9.076-12.638 3.13-17.394 6.053 2.004 9.318 9.582 6.73 14.656l-.002.003c-.932 1.821-2.615 3.32-5.195 4.121-.001.002-.001.002-.003.002-.009.002-.018.006-.029.01h-.005l-.027.008-.007.003-.025.008-.008.001-.025.008-.008.003-.028.008-.004.001a.311.311 0 0 1-.034.01l-.008.002c-.008.003-.016.004-.022.007a.066.066 0 0 0-.018.005l-.014.004-.019.006a.168.168 0 0 0-.013.004l-.02.005-.012.004-.02.005c-.004.002-.008.002-.014.003-.005.003-.013.004-.02.005-.002.002-.008.003-.012.004l-.02.006a.031.031 0 0 1-.01.002l-.023.007h-.003c-.04.012-.08.023-.12.032l-.002.001-.028.007-.006.001c-.009.003-.017.006-.026.007l-.007.001a.178.178 0 0 1-.025.007l-.007.003a.156.156 0 0 0-.027.006h-.004l-.188.046h-.002l-.028.006-.006.002-.026.006c-.003 0-.004 0-.007.002-.01.001-.017.004-.027.006h-.006a.172.172 0 0 1-.028.007l-.004.001-.03.007c-.042.01-.085.017-.126.027l-.006.001a.171.171 0 0 0-.025.005l-.01.002-.023.005-.012.003a.638.638 0 0 0-.022.004l-.013.002-.021.004a.069.069 0 0 1-.015.003l-.02.004-.016.004a.09.09 0 0 0-.019.003l-.02.004a.069.069 0 0 1-.014.002c-.012.003-.024.006-.036.007-.879.165-1.724.243-2.532.243" />
                <path fill="#2c1812" d="M166.562 68.288c.012-.001.024-.004.036-.007-.012.003-.024.006-.036.007m.05-.01c.007 0 .014-.002.02-.003l-.02.004m.04-.007.015-.004-.016.004m.036-.008.015-.003-.015.003m.036-.007c.004 0 .008 0 .013-.002l-.013.002m.035-.006.012-.003-.012.003m.036-.008.01-.002-.01.002m.034-.007.006-.001-.006.001m.131-.028h.001m.03-.007h.004-.004m.032-.008h.006-.006m.033-.006c.003-.002.004-.002.007-.002l-.007.002m.033-.008.006-.002c-.002.002-.003.002-.006.002m.034-.008h.002-.002m.19-.046h.004-.004m.031-.006.007-.003-.007.003m.032-.01h.007-.007m.033-.008h.006-.006m.034-.008h.001-.001m.122-.033h.003-.003M167.62 68.045c.004 0 .01-.002.012-.004-.002.002-.008.003-.012.004m.032-.009c.006-.001.01-.001.014-.003-.004.002-.008.002-.014.003m.034-.008.012-.004-.012.004m.032-.01a.168.168 0 0 1 .013-.003c-.004.001-.01.002-.013.004m.032-.01c.005 0 .01-.002.014-.004l-.014.004m.032-.009c.006-.003.014-.004.022-.007-.008.003-.016.004-.022.007m.03-.01a.311.311 0 0 0 .034-.009l-.034.01m.038-.01.028-.009-.028.008m.036-.01.025-.009-.025.008m.033-.009.025-.008-.025.008m.032-.01.027-.009-.027.008m.032-.009.03-.01-.03.01m.032-.01c2.58-.802 4.263-2.3 5.195-4.122-.93 1.821-2.615 3.319-5.195 4.121m5.195-4.12.001-.004-.001.003" />
                <path fill="#6f4323" d="M84.95 82.763c-3.69 0-6.955-2.015-9.19-5.674-2.723-4.456-2.931-9.425-.571-13.633 2.192-3.91 6.317-6.436 10.506-6.436 3.755 0 7.162 1.957 9.596 5.51 2.722 3.973 2.983 8.717.718 13.015-2.276 4.318-6.72 7.218-11.06 7.218" />
                <path fill="#351f17" d="M85.695 54.924c-4.934 0-9.777 2.947-12.334 7.507-2.742 4.888-2.52 10.628.61 15.75 2.63 4.307 6.53 6.678 10.979 6.678 5.175 0 10.243-3.272 12.912-8.336 2.601-4.938 2.286-10.61-.843-15.178-2.836-4.14-6.858-6.42-11.324-6.42m0 4.19c2.782 0 5.644 1.356 7.867 4.6 5.292 7.724-1.616 16.953-8.612 16.953-2.681 0-5.376-1.356-7.401-4.67-5.194-8.498 1.225-16.883 8.146-16.883" />
                <path fill="#5b3221" d="M84.95 80.665c-2.367 0-4.745-1.057-6.664-3.586 1.423 1.014 2.972 1.464 4.516 1.462 6.995 0 13.899-9.22 8.607-16.942-.176-.258-.36-.49-.546-.724.924.681 1.804 1.564 2.6 2.697a.018.018 0 0 0 .004.005l.012.016a.17.17 0 0 0 .018.026v.001l.04.056.01.017a.12.12 0 0 1 .015.022c1.385 2.021 1.935 4.145 1.865 6.181v.023c-.208 5.73-5.318 10.748-10.477 10.746" />
                <path fill="#2c1812" d="M95.427 69.919V69.9v.018m0-.023c.07-2.036-.48-4.16-1.865-6.181 1.385 2.021 1.935 4.145 1.865 6.181m-1.88-6.203-.01-.017.01.017m-.01-.017-.04-.056.04.056m-.04-.057a.17.17 0 0 1-.018-.026c.006.008.01.018.018.026m-.03-.042-.004-.005a.018.018 0 0 0 .004.005" />
                <path fill="#6f4323" d="M36.434 195.188c-8.043-.001-16.095-5.825-18.332-13.261-1.417-4.707-.332-9.96 2.979-14.414 3.48-4.684 8.776-7.593 13.82-7.593 3.004 0 5.838 1.03 8.2 2.98 4.918 4.064 7.596 12.575 6.364 20.237-.894 5.55-3.664 9.493-7.803 11.107-1.605.625-3.365.944-5.228.944" />
                <path fill="#351f17" d="M34.9 157.93c-5.66 0-11.567 3.217-15.417 8.395-3.69 4.964-4.888 10.86-3.288 16.175 2.519 8.368 11.219 14.677 20.239 14.677 2.112 0 4.113-.362 5.952-1.078 4.752-1.852 8.05-6.462 9.044-12.647 1.337-8.313-1.633-17.601-7.063-22.087-2.721-2.248-5.994-3.436-9.466-3.436m0 3.982c2.409 0 4.802.765 6.932 2.524 7.62 6.295 8.497 24.295-.894 27.954-1.408.55-2.936.807-4.505.807-6.763 0-14.305-4.796-16.427-11.843-2.81-9.333 6.143-19.442 14.894-19.442" />
                <path fill="#5b3221" d="M36.451 193.193c-2.5 0-5.11-.658-7.512-1.841.31.019.619.028.926.028 1.554 0 3.069-.244 4.462-.788 9.39-3.657 8.515-21.659.892-27.953-.324-.268-.668-.452-1.004-.676.236-.014.47-.022.707-.022 2.372 0 4.73.723 6.832 2.43.027.02.052.042.079.064 3.81 3.148 5.934 9.22 5.933 14.966-.003 5.744-2.13 11.16-6.827 12.988-.296.116-.598.219-.905.308a12.68 12.68 0 0 1-3.583.496" />
                <path fill="#2c1812" d="M40.034 192.697c.307-.089.61-.192.905-.308 4.696-1.829 6.824-7.244 6.827-12.988-.003 5.744-2.13 11.16-6.827 12.988-.296.116-.598.219-.905.308m1.799-28.262c-.027-.022-.052-.043-.08-.064.028.02.053.042.08.064" />
                <path fill="#6f4323" d="M139.002 222.475c-5.306 0-8.934-2.775-9.956-7.612-1.004-4.748.072-9.508 2.953-13.06 2.467-3.044 6.004-4.788 9.704-4.788 2.753 0 5.55.965 8.09 2.791 3.702 2.666 5.74 6.655 5.449 10.671-.287 3.967-2.734 7.427-6.712 9.495-3.062 1.59-6.535 2.503-9.527 2.503h-.001" />
                <path fill="#351f17" d="M141.703 194.918c-4.335 0-8.465 2.029-11.332 5.565-3.28 4.045-4.51 9.444-3.376 14.813 1.228 5.808 5.717 9.275 12.007 9.275 3.32 0 7.144-.999 10.493-2.74 4.64-2.411 7.496-6.494 7.837-11.202.344-4.748-2.017-9.429-6.316-12.523-2.898-2.084-6.118-3.188-9.313-3.188m0 4.192c2.199 0 4.55.731 6.865 2.398 6.436 4.632 6.152 12.885-1.005 16.604-2.56 1.33-5.697 2.268-8.561 2.268-3.723 0-6.984-1.586-7.907-5.95-1.716-8.12 3.707-15.32 10.608-15.32" />
                <path fill="#5b3221" d="M139.036 220.367c-1.845 0-3.578-.388-4.972-1.31.088.002.175.003.263.003 2.863 0 5.999-.93 8.557-2.259 7.158-3.718 7.442-11.973 1.006-16.604a14.45 14.45 0 0 0-1.686-1.038c2.04.101 4.186.796 6.314 2.313l.001.001.023.016.026.019c3.067 2.207 4.608 5.237 4.607 8.207-.003 3.261-1.865 6.45-5.612 8.397l-.272.139c-2.5 1.252-5.503 2.116-8.255 2.116" />
                <path fill="#2c1812" d="M147.291 218.25c.092-.045.183-.091.272-.138 3.747-1.947 5.61-5.136 5.612-8.397-.003 3.261-1.865 6.45-5.612 8.397l-.272.139m1.277-16.743-.026-.019.026.019m-.049-.035-.001-.001.001.001" />
                <path fill="#6f4323" d="M88.851 200.747c-3.35 0-6.24-1.06-8.358-3.066-3.86-3.65-4.916-8.966-2.826-14.218 2.302-5.783 7.812-9.822 13.399-9.822.475 0 .953.03 1.435.086 5.892.7 10.445 3.814 12.178 8.33 1.64 4.272.481 9.118-3.18 13.296-2.825 3.226-7.908 5.394-12.648 5.394" />
                <path fill="#351f17" d="M91.066 171.547c-6.525 0-12.693 4.477-15.345 11.141-2.42 6.079-1.174 12.253 3.332 16.516 2.516 2.38 5.904 3.637 9.798 3.637 5.308 0 11.025-2.453 14.224-6.108 4.19-4.782 5.488-10.405 3.56-15.427-2.017-5.255-7.21-8.866-13.888-9.66-.556-.066-1.121-.1-1.681-.1m0 4.191c.393 0 .79.023 1.188.071 10.118 1.202 14.708 10.13 7.67 18.165-2.365 2.699-6.845 4.678-11.073 4.678-2.577 0-5.062-.735-6.917-2.49-7.748-7.33-.248-20.424 9.132-20.424" />
                <path fill="#5b3221" d="M88.851 198.65c-2.577 0-5.062-.734-6.917-2.49l-.064-.061c-.437-.42-.813-.866-1.155-1.32.94.237 1.924.348 2.922.346 4.225 0 8.694-1.968 11.057-4.665 4.319-4.93 4.245-10.188 1.217-13.8 7.417 2.657 10.107 10.25 4.103 17.21h-.002a.172.172 0 0 0-.014.018c-.003.001-.004.004-.006.006l-.013.015-.005.007-.014.013-.008.01c-.004.005-.006.01-.01.012l-.019.022c-1 1.142-2.377 2.154-3.954 2.943-2.154 1.076-4.678 1.735-7.118 1.735" />
                <path fill="#2c1812" d="M95.969 196.916c1.577-.79 2.954-1.801 3.954-2.943l.019-.022-.019.022c-1 1.142-2.377 2.154-3.954 2.943m-14.035-.756-.064-.061.064.061m18.018-2.22.008-.01-.008.01m.022-.024.005-.007-.005.007m.018-.022c.002-.002.003-.005.006-.006l-.006.006m.02-.023s0-.002.002-.002c-.002 0-.002.002-.002.002" />
                <path fill="#6f4323" d="M203.984 154.718c-3.349 0-6.24-1.058-8.358-3.063-3.86-3.652-4.916-8.968-2.827-14.22 2.303-5.782 7.812-9.82 13.4-9.82.475 0 .953.028 1.435.085 5.892.7 10.444 3.815 12.178 8.332 1.64 4.27.482 9.116-3.18 13.295-2.826 3.225-7.909 5.391-12.648 5.391" />
                <path fill="#351f17" d="M206.2 125.52c-6.528 0-12.694 4.477-15.348 11.14-2.418 6.079-1.173 12.253 3.334 16.517 2.516 2.38 5.904 3.638 9.798 3.638 5.307 0 11.024-2.454 14.224-6.107 4.191-4.784 5.488-10.405 3.56-15.428-2.017-5.255-7.209-8.867-13.888-9.661a14.458 14.458 0 0 0-1.68-.099m0 4.19c.391 0 .788.023 1.186.071 10.118 1.202 14.71 10.131 7.67 18.164-2.365 2.7-6.844 4.68-11.072 4.68-2.578 0-5.062-.737-6.918-2.492-7.747-7.329-.247-20.422 9.133-20.422" />
                <path fill="#5b3221" d="M203.984 152.624c-.518 0-1.033-.03-1.54-.092-2.012-.245-3.896-.996-5.378-2.399-.223-.212-.387-.442-.584-.661 1.27.487 2.654.707 4.068.707 4.222 0 8.692-1.97 11.054-4.666 4.55-5.193 4.22-10.746.703-14.358 6.46 3.04 8.501 10.186 2.784 16.752l-.004.004-.013.014c-.006.007-.01.014-.018.02-2 2.284-5.514 4.052-9.11 4.543-.654.09-1.31.136-1.962.136" />
                <path fill="#2c1812" d="M203.983 152.624a12.787 12.787 0 0 1 .001 0m11.072-4.679a.232.232 0 0 0 .018-.02c-.006.007-.01.014-.018.02m.031-.034.004-.004-.004.004" />
                <path fill="#6f4323" d="M53.043 52.012c-5.27 0-9.898-1.852-13.03-5.213-5.958-6.396-1.46-17.347 3.02-23.146 2.818-3.65 8.19-5.832 14.368-5.832 3.51 0 6.856.74 9.417 2.086 3.167 1.661 5.344 4.63 6.301 8.584 1.236 5.114.164 11.258-2.67 15.286-3.52 5.003-10.351 8.235-17.404 8.235h-.002" />
                <path fill="#351f17" d="M57.4 15.725c-6.822 0-12.813 2.486-16.026 6.648-5.888 7.627-9.307 18.97-2.893 25.854 3.532 3.792 8.704 5.881 14.562 5.881 7.715 0 15.22-3.581 19.12-9.125 3.21-4.563 4.384-11.23 2.992-16.984-1.085-4.494-3.701-8.026-7.362-9.948-2.86-1.499-6.548-2.326-10.392-2.326m0 4.192c3.096 0 6.128.63 8.444 1.844 7.105 3.731 6.934 15.062 2.892 20.811-3.2 4.547-9.552 7.345-15.694 7.345-4.332 0-8.558-1.393-11.497-4.548-5.039-5.409-.868-15.237 3.145-20.434 2.63-3.406 7.752-5.018 12.71-5.018" />
                <path fill="#5b3221" d="M53.075 49.903c-4.166 0-8.238-1.29-11.162-4.194 1.668.5 3.436.735 5.22.735 6.137 0 12.484-2.792 15.68-7.336 3.405-4.843 4.045-13.63-.078-18.513 1.122.296 2.176.678 3.11 1.166 3.997 2.1 5.69 6.602 5.689 11.164-.001 3.548-1.03 7.131-2.797 9.647-3.196 4.541-9.532 7.33-15.662 7.33" />
                <path fill="#6f4323" d="M202.492 104.203c-5.128-.002-9.66-1.956-12.762-5.506-5.592-6.4-1.73-17.042 2.23-22.634 2.431-3.434 7.168-5.483 12.671-5.483 3.5 0 6.85.83 9.433 2.336 2.978 1.733 5.056 4.744 6.01 8.703 1.208 5.009.362 10.956-2.102 14.8-3.033 4.728-9.109 7.784-15.478 7.784h-.002" />
                <path fill="#351f17" d="M204.631 68.576c-6.152 0-11.5 2.367-14.307 6.33-2.382 3.365-4.197 7.534-4.977 11.44-1.104 5.529-.11 10.255 2.873 13.67 3.49 3.992 8.558 6.19 14.272 6.19 7.036 0 13.775-3.417 17.167-8.705 2.784-4.341 3.71-10.76 2.363-16.352-1.086-4.502-3.488-7.949-6.95-9.965-2.884-1.683-6.592-2.608-10.44-2.608m0 4.008c3.055 0 6.106.712 8.423 2.063 6.667 3.884 6.812 15.104 3.23 20.689-2.749 4.287-8.285 6.863-13.793 6.863-4.174 0-8.336-1.482-11.253-4.82-4.803-5.495-1.213-15.118 2.357-20.158 2.24-3.165 6.643-4.637 11.036-4.637" />
                <path fill="#5b3221" d="M202.51 102.19c-4.099 0-8.184-1.426-11.095-4.635 2.12 1.002 4.463 1.47 6.81 1.47 5.507 0 11.042-2.576 13.79-6.86 3.004-4.682 3.37-13.31-.513-18.272.542.228 1.07.471 1.553.754 3.893 2.268 5.563 7.038 5.564 11.726.001 3.34-.843 6.64-2.333 8.963a12.897 12.897 0 0 1-2.083 2.475c-2.995 2.778-7.352 4.38-11.693 4.38" />
                <path fill="#2c1812" d="M214.203 97.81c.001 0 .004-.003.005-.006a.03.03 0 0 1-.005.007m.021-.02a12.897 12.897 0 0 0 2.062-2.455c1.49-2.323 2.334-5.623 2.333-8.963.001 3.34-.843 6.64-2.333 8.963a12.856 12.856 0 0 1-2.062 2.455" />
                <path fill="#6f4323" d="M39.713 143.56c-7.995-.001-14.396-6.873-15.742-13.241-1.27-6.008 1.543-11.175 7.524-13.822a12.758 12.758 0 0 1 5.195-1.117c7.628 0 13.799 6.716 15.357 13.208 1.392 5.793-.813 10.799-5.9 13.392-2.056 1.048-4.22 1.58-6.433 1.58h-.001" />
                <path fill="#351f17" d="M36.69 113.284a14.84 14.84 0 0 0-6.043 1.297c-6.85 3.032-10.193 9.228-8.725 16.172 1.548 7.326 8.625 14.902 17.79 14.902 2.549 0 5.033-.608 7.387-1.808 5.918-3.018 8.595-9.051 6.987-15.747-1.75-7.283-8.735-14.816-17.396-14.816m0 4.192c10.881 0 19.635 16.964 8.505 22.637-1.837.936-3.688 1.351-5.482 1.351-11.542 0-20.647-17.175-7.37-23.05a10.657 10.657 0 0 1 4.347-.938" />
                <path fill="#5b3221" d="M39.733 141.459c-2.178 0-4.268-.612-6.14-1.642.146.006.292.008.438.008 1.79 0 3.636-.402 5.468-1.336 9.023-4.6 4.976-16.618-2.677-21.002 7.079.089 13.223 7.326 13.523 13.904v.046c.138 3.323-1.22 6.47-4.704 8.438l-.028.014-.004.003a.216.216 0 0 1-.024.013l-.007.004-.021.012-.011.006-.02.012a.04.04 0 0 0-.01.005l-.022.012a.04.04 0 0 0-.01.005l-.017.01-.016.008-.012.006-.02.011a.076.076 0 0 0-.01.005l-.02.012a.047.047 0 0 0-.012.006l-.02.01-.016.008-.016.01-.03.014-.002.002-.023.012-.01.005-.013.007-.052.026c-.293.15-.588.287-.882.41-1.54.645-3.08.937-4.58.936" />
                <path fill="#2c1812" d="M44.313 140.523a12.752 12.752 0 0 1 0 0m.934-.436.012-.007-.012.007m.023-.012.023-.012-.023.012m.025-.014.03-.014a.3.3 0 0 1-.03.014m.046-.024.016-.008-.016.008m.036-.018.012-.006-.012.006m.063-.034.011-.006-.012.006m.028-.014a.1.1 0 0 1 .016-.01l-.016.01m.027-.015.021-.012-.021.012m.032-.017.02-.012-.02.012m.03-.018.022-.012-.021.012m.028-.016.024-.013c-.008.004-.016.01-.024.013m.028-.016.028-.014-.028.014m.028-.014c3.485-1.968 4.842-5.115 4.705-8.438.137 3.322-1.22 6.47-4.705 8.438m4.705-8.439v-.021.021m-.001-.037v-.008.008" />
                <path fill="#351f17" d="M95.123 126.928c2.262 6.404-1.097 13.428-7.5 15.688-6.402 2.261-13.426-1.096-15.688-7.499-2.261-6.402 1.098-13.426 7.5-15.688 6.403-2.261 13.427 1.096 15.688 7.499" />
                <path class="cookie__eye" fill="#fff" d="M80.37 126.579a3.925 3.925 0 0 1-2.396 5.009 3.925 3.925 0 1 1-2.615-7.403 3.926 3.926 0 0 1 5.01 2.394M82.098 132.313a1.478 1.478 0 1 1-2.788.983 1.478 1.478 0 0 1 2.788-.983M83.34 127.705a.929.929 0 0 1-.566 1.183.925.925 0 1 1-.616-1.747.927.927 0 0 1 1.183.564" />
                <path fill="#351f17" d="M156.404 105.287c2.262 6.404-1.096 13.426-7.5 15.688-6.402 2.261-13.425-1.096-15.686-7.5-2.262-6.403 1.096-13.426 7.497-15.687 6.404-2.261 13.428 1.096 15.69 7.499" />
                <path class="cookie__eye" fill="#fff" d="M141.652 104.937a3.927 3.927 0 1 1-7.406 2.614 3.927 3.927 0 0 1 7.406-2.614M143.38 110.672a1.477 1.477 0 1 1-2.786.984 1.477 1.477 0 0 1 2.785-.984M144.622 106.064a.927.927 0 1 1-1.75.617.927.927 0 0 1 1.75-.617" />
                <path fill="#ef3644" d="M115.724 134.981a9.672 9.672 0 0 1-9.105-6.445 1.093 1.093 0 0 1-.061-.435c.05-.813.95-2.981 8.192-5.538 3.185-1.126 5.644-1.362 7.144-1.362 1.337 0 2.086.183 2.168.203.357.092.645.355.766.701 1.775 5.022-.866 10.55-5.888 12.323a9.645 9.645 0 0 1-3.214.553h-.002" />
                <path fill="#351f17" d="M121.894 120.097c-1.587 0-4.179.248-7.512 1.424-7.202 2.544-8.83 4.946-8.926 6.512-.018.296.024.592.122.871a10.781 10.781 0 0 0 10.146 7.181c1.22 0 2.426-.208 3.583-.616a10.697 10.697 0 0 0 6.125-5.506 10.687 10.687 0 0 0 .438-8.224 2.205 2.205 0 0 0-1.535-1.403c-.155-.04-1-.239-2.441-.239zm0 2.208c1.236 0 1.894.168 1.894.168a8.554 8.554 0 0 1-8.064 11.404 8.56 8.56 0 0 1-8.065-5.708s.123-1.976 7.457-4.566c2.995-1.058 5.3-1.298 6.778-1.298" />
                <path fill="#fff" d="M108.84 131.448c-.354 0-.732-.181-.94-.468a9.613 9.613 0 0 1-1.28-2.444 1.093 1.093 0 0 1-.062-.435c.05-.813.95-2.981 8.192-5.538 3.185-1.126 5.644-1.362 7.144-1.362 1.337 0 2.086.183 2.168.203.357.092.645.355.766.701a9.62 9.62 0 0 1 .542 2.75c.014.301-.106.616-.315.834-.872.914-15.377 5.759-16.215 5.759" />
                <path fill="#351f17" d="M121.894 120.097c-1.587 0-4.179.248-7.512 1.424-7.202 2.544-8.83 4.946-8.926 6.512-.018.296.024.592.122.871.344.972.825 1.888 1.43 2.724a2.304 2.304 0 0 0 1.832.924c.372 0 1.062 0 8.62-2.66 7.694-2.708 8.002-3.03 8.392-3.441a2.253 2.253 0 0 0 .62-1.644c-.05-1.05-.253-2.08-.602-3.07a2.205 2.205 0 0 0-1.535-1.401c-.155-.04-1-.239-2.441-.239zm0 2.208c1.236 0 1.894.168 1.894.168.286.806.44 1.624.48 2.435.014.317-14.492 5.436-15.428 5.436l-.045-.01a8.487 8.487 0 0 1-1.136-2.165s.123-1.976 7.457-4.566c2.995-1.058 5.3-1.298 6.778-1.298M134.956 91.607l.003-.003c.075-.061 1.096-.884 2.756-1.679 1.661-.797 3.953-1.561 6.587-1.56 2.113.003 4.452.482 6.941 1.854a1.103 1.103 0 1 0 1.067-1.932c-2.815-1.556-5.556-2.131-8.008-2.128-3.162.001-5.835.936-7.72 1.862-1.886.928-2.995 1.854-3.044 1.895a1.105 1.105 0 0 0 1.418 1.69M79.63 108.955l-.067-.002c-.457.003-3.237.05-6.49 1.38-3.244 1.322-6.988 4.004-9.078 9.142a1.103 1.103 0 1 0 2.044.833c1.85-4.516 5.015-6.75 7.872-7.933 2.852-1.172 5.375-1.216 5.652-1.215h.019a1.103 1.103 0 1 0 .05-2.205" />
            </svg>
        </figure>
    </div>
</aside>
CSS
@layer demo {
    :root {
        --cookie-size: 180px;
        --color-text: #111;
        --color-neutral: #f4f4f4;
        --color-primary: #5b3221;
        --color-secondary: #f8c256;
        --color-shadow: rgb(0 0 0 / 0.6);
        --transition-bounce: cubic-bezier(0.2, 0.7, 0.4, 1.65);
    }
 
    body {
        font-weight: 500;
        font-size: 1.15rem;
        color: var(--color-text);
    }
 
    h1,
    h2,
    h3 {
        font-weight: 600;
        color: var(--color-primary);
    }
 
    .cookie-notice {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: var(--color-neutral);
        padding: 2rem;
        max-height: 100vh;
        
        svg {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
 
    .cookie-notice__inner {
        display: flex;
        max-width: 768px;
        margin: 0 auto;
        flex-direction: column-reverse;
        gap: 1.5rem;
        
        @media screen and (width >= 620px) {
            gap: 2rem;
            flex-direction: row-reverse;
        }
    }
 
 
    .cookie-notice__graphic-container {
        position: relative;
        display: block;
        margin: 0;
        flex: 0 0 var(--cookie-size);
        width: var(--cookie-size);
        height: var(--cookie-size);
        margin-top: calc(-0.5 * var(--cookie-size));
    }
 
    .cookie-notice__graphic {
        width: var(--cookie-size);
    }
 
    .cookie-notice__title {
        margin-bottom: 0.5rem;
    }
 
    .cookie-notice__content {
        margin-bottom: 1rem;
    }
 
    .cookie-notice__actions {
        display: flex;
        gap: 1rem;
    }
 
    .cookie-notice__button {
        background: var(--color-secondary);
        margin: 0;
        padding: 0.65rem 1.5rem;
        cursor: pointer;
        border-radius: 0.35rem;
        font-weight: 600;
        border-width: 0;
        border-bottom: 0.3rem solid var(--color-primary);
        color: var(--color-primary);
        transition: background 0.2s ease-out, color 0.2s ease-out;
    
        &:hover,
        &:active {
          background: var(--color-primary);
          color: var(--color-secondary);
        }
    }
 
    .cookie__eye {
        transform-box: fill-box;
        transform-origin: center center;
        backface-visibility: hidden;
    }
 
    .cookie-notice__shadow {
        display: block;
        box-shadow: 0 0.2rem 1.3rem 0.2rem var(--color-shadow);
        width: 100%;
        transform-origin: center;
        transform: scaleX(0.8);
        position: absolute;
        bottom: 0;
    }
}

Demo 地址：https://codepen.io/airen/full/QWoeeVB

接下来，为 SVG 添加三个动画：

  • 快速而生动的淡入动画（入场动画）
  • 具有适当延迟的重复摇摆动画
  • 眼睛微妙闪烁的动画

前两个动画将应用于 <svg> 元素本身，最后个（眼睛闪烁）动画将应用于 SVG 内的两个 <path> 元素（类名为 .cookie__eye 的 <path> 元素）。注意，最终效果还包括 SVG 图形下面的阴影（类名为 .cookie-notice__shadow 的 span 元素）。

入场动画

整个 SVG 图形从屏幕左侧滚入，并且为了动画效果在较大的屏幕上不显得那么突兀，因此在滚入的过程中还为 SVG 图形添加了一个淡入的效果。我们可以分别使用 opacity 和 CSS 的变换特性来定义入场动画：

CSS
@keyframes enter {
    from {
        opacity: 0;
        translate: -60% 0 0; 
        rotate: 0 0 1 -50deg;
    }
    to {
        opacity: 1;
        translate: 0 0 0; 
        rotate: 0 0 1 17deg;
    }
}

为了能使动画效果具有奇趣感，我们还需要选择一个适当的缓动函数，在这里选择了 linear() 函数创建的弹跳式缓动函数。这将使 SVG 元素超过最终位置，然后迅速回到位置，实现弹跳效果。

让我们将其存储在 CSS 变量中，以便我们可以在可重复摇摆运动动画中重复使用它。让我们把所有东西放在一起，设置一个持续时间值和填充模式，并将已创建好的 enter 动画添加到我们的 SVG 元素：

CSS
:root {
    --transition-bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}
 
.cookie-notice__graphic {
    opacity: 0; /* 让 SVG 元素最开始不可见 */
    animation: enter 0.8s var(--transition-bounce) 0.3s  forwards;
}

请注意 SVG 元素下面的阴影效果。由于 SVG 从屏幕侧面滚入，它的阴影也应该同 SVG 元素动画一起运动。因此，为了给用户能提供一个更优雅的动画效果，我们需要为阴影元素 .cookie-notice__shadow 添加动画效果：

CSS
@keyframes shadow-enter {
    0% {
        opacity: 0;
        translate: -60% 0 0;
    }
 
    100% {
        opacity: 1;
        translate:  0 0 0;
    }
}
 
@keyframes shadow-movement {
    0%,45%,60%,100% {
        translate:  0 0 0;
    }
    50% {
        translate: -10% 0 0;
    }
    55% {
        translate:6% 0 0;
    }
}
 
.cookie-notice__shadow {
    transform-origin: center;
    scale: .8 1;
    opacity: 0;
    animation: shadow-enter 0.8s 0.3s var(--transition-bounce) forwards, shadow-movement 6s 3s ease infinite;
}

这个时候，你看到的效果如下：

Demo 地址：https://codepen.io/airen/full/vYMBpjK

重复摇摆动画

接下来在入场动画的基础上给 svg 元素添加一个重复摇摆动画效果，为用户创建一个温和的提醒，引起注意，而且不会显眼或阻挡用户操作。

我们可以按照下面这几个步骤来创建这个重复动画：

  • 物体保持静止（动画在关键帧之间暂停）
  • 轻轻拉回到左侧并旋转回来
  • 释放并向前移动，并同时向前旋转
  • 当它返回到原始位置并停止时减速
  • 物体保持静止（动画在关键帧之间暂停）

然而，默认情况下，CSS 动画只要开启之后是无法使动画在关键帧之间暂停。如果要做到一点，就需要使用相同值的关键帧和一些数学计算，其中数学计算是用来精确计时我们的关键帧。换句话说，我们要使用 @keyframes 定义中的百分比值创建关键帧之间的暂停，即创建迭代之间的人工延迟。

CSS
@keyframes wiggle {
    /* 保持静止 */
    0% {
        translate: 0 0 0; 
        rotate: 0 0 1 17deg;
    }
    /* 开始移动 */
    45% {
        translate: 0 0 0;
        rotate: 0 0 1 17deg;
    }
 
    /* 往回拉 */
    50% {
        translate: -10% 0 0; 
        rotate: 0 0 1 8deg;
    }
 
    /* 向前移 */
    55% {
        translate: 6% 0 0; 
        rotate: 0 0 1 24deg;
    }
 
    /* 返回起始位置 */
    60% {
        translate: 0 0 0; 
        rotate: 0 0 1 17deg;
    }
 
    /* 保持静止 */
    100% {
        translate: 0 0 0 
        rotate: 0 0 1 17deg;
    }
}

将 @keyframes 中定义相同的样式的百分比合并在一起，代码可以简化成：

CSS
@keyframes wiggle {
    0%, 45%, 60%, 100% {
        translate: 0 0 0; 
        rotate: 0 0 1 17deg;
    }
    50% {
        translate: -10% 0 0; 
        rotate: 0 0 1 8deg;
    }
    55% {
        translate: 6% 0 0; 
        rotate: 0 0 1 24deg;
    }
}

把已定义好的 wiggle 动画追回到 svg 元素上：

CSS
.cookie-notice__graphic {
    opacity: 0;
    animation: 
        enter 0.8s var(--transition-bounce) 0.3s  forwards, 
        wiggle 6s  var(--transition-bounce) 3s infinite;
}

注意，现在 svg 元素上同时应用了 enter （入场动画）和 wiggle （重复摇摆动画）两个动画。你现在看到的效果如下：

Demo 地址：https://codepen.io/airen/full/JjVPeOv

重复眼睛闪烁动画

最后就是给 “Cookie” 图案（SVG）上的眼睛添加动画效果。这对眼睛对应的是 SVG 中的两个 <path> 元素，也就是上面代码中已命名为 .cookie__eye 的 path 。

你可能已经发现了，“Cookie” 图案是由很多个 <path> 组成的。你可能拿到 SVG 代码并没有给“眼睛”定义类名，甚至不知道它们对应的是哪两个 <path> 元素。在此情况之下，你可以使用浏览器的开发者工具来帮助你快速定位到这两个 <path> 元素，并且给其添加相应的类名（任何你喜欢的名称）：

我们想让“Cookie”的眼睛闪闪发光。使用 @keyframes 定义它并不复杂，只需要改变“眼睛”的透明度（opacity），并对其进行较小比例的缩放（scale）。

CSS
@keyframes sparkle {
    from {
        opacity: 0.95;
        scale:0.95;
    }
    to {
        opacity: 1;
        scale:1;
    }
}

我们希望“Cookie”的眼睛在重复闪烁时没有任何的延迟，而且这个效果应该是很微妙的，还要能够与图形和整体元素很好的融合，对用户不会产生干扰。为了使动画从开始状态到结束状态有一个快速而生动的过渡效果，我们给动画应用了一个 steps() 函数：

CSS
.cookie__eye {
    animation: sparkle 0.15s  steps(2, jump-none) 1s infinite alternate;
}

有一点需要注意的是，transform-origin 将相对于 svg 元素的视口框（viewBox）设置，而不是“眼睛”（<path>）元素自身。因此，如果我们设置 transform-origin: center center ，那么变换将使用 SVG 的中心坐标而不是 path 元素。我们可以通过将 transform-box 属性设置为 fill-box 来轻松解决这个问题：

CSS
.cookie__eye {
    animation: sparkle 0.15s  steps(2, jump-none) 1s infinite alternate;
    transform-box: fill-box;
    transform-origin: center center;
    backface-visibility: hidden;
}

这样一来，我们就将三个非常不同的动画效果应用于“Cookie”图形。你最终看到的效果如下：

Demo 地址：https://codepen.io/airen/full/VwNZVdg

飞行中的战斗机

在前面的内容中，我向大家展示了如何从 undraw 平台上获取自己喜欢的 SVG 插图。例如，从 undraw 上下载了一张有关于飞机（“aircraft”）的 SVG 插图。它所对应的 SVG 代码如下：

SVG
<svg width="993.73022" height="422.32217" viewBox="0 0 993.73022 422.32217">
    <path d="M608.03796,422.32217h-221.40814c-6.26141,0-11.35526-5.0943-11.35526-11.35526V11.35525c0-6.26094,5.09384-11.35525,11.35526-11.35525h221.40814c6.26141,0,11.35522,5.09431,11.35522,11.35525V410.96692c0,6.26093-5.09381,11.35526-11.35522,11.35526ZM473.16803,1.89625c-53.01779,0-95.99719,42.97942-95.99719,95.99722V410.96692c0,5.22406,4.23495,9.45901,9.45901,9.45901h221.40811c5.22406,0,9.45898-4.23492,9.45898-9.45898V11.35525c0-5.22407-4.23492-9.45901-9.45898-9.45901h-134.86993Z" fill="#e6e6e6" />
    <path d="M618.24402,105.3093c0,.67684,.75897,1.2203,1.70404,1.2203h292.52301c.94501,0,1.70398-.54346,1.70398-1.2203,0-.67678-.75897-1.2203-1.70398-1.2203h-292.52307c-.94513,0-1.70404,.54352-1.70404,1.2203h.00006Z" fill="#e6e6e6" />
    <polygon points="380.33884 279.58173 383.23392 356.30087 376.18716 356.30087 376.18716 364.98608 395.88272 364.98608 395.88272 356.30087 390.13818 356.30087 390.54849 279.58173 380.33884 279.58173" fill="#3f3d56" />
    <path d="M372.73932,343.99686h-.00003c2.99792,0,5.42825,2.43033,5.42825,5.42825v22.43671c0,2.99792-2.43033,5.42825-5.42825,5.42825h.00003c-2.99792,0-5.42825-2.43033-5.42825-5.42825v-22.43671c0-2.99792,2.43033-5.42825,5.42825-5.42825Z" fill="#3f3d56" />
    <path d="M400.2424,343.99686h-.00003c2.99792,0,5.42825,2.43033,5.42825,5.42825v22.43671c0,2.99792-2.43033,5.42825-5.42825,5.42825h.00003c-2.99792,0-5.42825-2.43033-5.42825-5.42825v-22.43671c0-2.99792,2.43033-5.42825,5.42825-5.42825Z" fill="#3f3d56" />
    <polygon points="444.39209 231.78143 332.93219 226.71507 350.30258 218.75365 448.01093 220.20119 444.39209 231.78143" fill="#6c63ff" />
    <polygon points="0 243.03156 13.4609 237.96519 431.36432 248.82169 448.73471 240.86026 441.49704 290.07632 109.53795 254.70364 0 243.03156" fill="#6c63ff" />
    <polygon points="107.4792 271.6203 109.53795 254.70364 441.49704 290.07632 439.68762 315.04623 107.4792 271.6203" fill="#3f3d56" />
    <ellipse cx="330.76089" cy="285.00998" rx="34.37888" ry="36.55017" fill="#3f3d56" />
    <circle cx="330.76089" cy="278.49609" r="25.33179" fill="#6c63ff" />
    <polygon points="613.39136 279.58173 610.49634 356.30087 617.54303 356.30087 617.54303 364.98608 597.84753 364.98608 597.84753 356.30087 603.59204 356.30087 603.1817 279.58173 613.39136 279.58173" fill="#3f3d56" />
    <rect x="615.56262" y="343.99686" width="10.85651" height="33.29321" rx="5.42822" ry="5.42822" fill="#3f3d56" />
    <rect x="588.05963" y="343.99686" width="10.85651" height="33.29321" rx="5.42822" ry="5.42822" fill="#3f3d56" />
    <polygon points="549.33813 231.78143 660.79803 226.71507 643.42767 218.75365 545.7193 220.20119 549.33813 231.78143" fill="#6c63ff" />
    <polygon points="509.44403 216.18808 504.37772 104.72817 496.41629 122.09854 497.8638 219.8069 509.44403 216.18808" fill="#6c63ff" />
    <polygon points="993.73022 243.03156 980.26935 237.96519 562.36591 248.82169 544.99554 240.86026 552.23315 290.07632 884.19226 254.70364 993.73022 243.03156" fill="#6c63ff" />
    <polygon points="886.25104 271.6203 884.19226 254.70364 552.23315 290.07632 554.0426 315.04623 886.25104 271.6203" fill="#3f3d56" />
    <ellipse cx="662.96936" cy="285.00998" rx="34.37885" ry="36.55017" fill="#3f3d56" />
    <circle cx="662.96936" cy="278.49609" r="25.33179" fill="#6c63ff" />
    <path d="M560.01367,217.89745l-1.64294,12.10632-.854,65.16789c-.06519,4.84918-.65143,9.64053-1.75153,14.28714-3.1701,13.53439-10.57422,25.84564-21.51038,34.76971-9.92279,8.10614-23.45718,14.24365-41.37039,13.15802-47.76852-2.89505-51.9881-43.54901-51.9881-43.54901l1.80219-73.72276,.24609-10.11098,2.1713-18.24385s5.79013-51.38736,59.34879-49.93983c53.55869,1.44753,55.54898,56.07735,55.54898,56.07735Z" fill="#6c63ff" />
    <polygon points="456.69611 200.90344 467.55261 183.53307 481.30414 179.19048 528.34894 179.19048 539.9292 183.53307 550.43805 200.90344 531.24396 192.21826 477.40039 192.21826 456.69611 200.90344" fill="#e6e6e6" />
    <g>
        <polygon points="496.50888 325.78528 498.36609 375.00134 493.84552 375.00134 493.84552 380.57297 506.48041 380.57297 506.48041 375.00134 502.79523 375.00134 503.05847 325.78528 496.50888 325.78528" fill="#3f3d56" />
        <path d="M491.6337,367.10818h0c1.92322,0,3.48227,1.55905,3.48227,3.48227v14.39337c0,1.92322-1.55905,3.48227-3.48227,3.48227h0c-1.92322,0-3.48227-1.55905-3.48227-3.48227v-14.39337c0-1.92322,1.55905-3.48227,3.48227-3.48227Z" fill="#3f3d56" />
        <path d="M509.27719,367.10818h0c1.92322,0,3.48227,1.55905,3.48227,3.48227v14.39337c0,1.92322-1.55905,3.48227-3.48227,3.48227h0c-1.92322,0-3.48227-1.55905-3.48227-3.48227v-14.39337c0-1.92322,1.55905-3.48227,3.48227-3.48227Z" fill="#3f3d56" />
    </g>
    <rect x="460.31845" y="185.7903" width="37.36307" height="1.99969" transform="translate(170.83368 598.33002) rotate(-74.47739)" fill="#6c63ff" />
    <rect x="529.99975" y="174.10844" width="2.00043" height="37.3632" transform="translate(-27.20847 106.00117) rotate(-11.11698)" fill="#6c63ff" />
    <circle cx="734.41626" cy="103.75365" r="13" fill="#6c63ff" />
    <circle cx="374.6018" cy="146.30627" r="13" fill="#6c63ff" />
    <path d="M80.244,390.3093c0,.67685,.75895,1.22031,1.70405,1.22031H374.4711c.94501,0,1.70398-.54346,1.70398-1.22031,0-.67679-.75894-1.22031-1.70398-1.22031H81.94805c-.9451,0-1.70405,.54352-1.70405,1.22031Z" fill="#e6e6e6" />
    <circle cx="196.41629" cy="388.75366" r="13" fill="#6c63ff" />
</svg>

上面 SVG 代码所对应的图形如下图所示：

接下来，我们可以按上一个示例的方式，给“飞机”添加一些你喜欢的动画效果。在这个过程中，并没有太复杂的事情需要做。为了使你能更知道“飞机”的部位，可以通过浏览器的开发者工具找出“飞机”的部位，并为其添加相应的标签，例如定义类名或在 SVG 代码中添加注释。

你还可以使用 SVG 的 <g> 元素将飞机相同的部位对应的元素包裹起来：

SVG
<svg viewBox="0 0 993.73022 422.32217" class="aircraft">
    <!--  中间线条 + 点  -->
    <g class="aircraft__line aircraft__line--center">
        <path d="M608.03796,422.32217h-221.40814c-6.26141,0-11.35526-5.0943-11.35526-11.35526V11.35525c0-6.26094,5.09384-11.35525,11.35526-11.35525h221.40814c6.26141,0,11.35522,5.09431,11.35522,11.35525V410.96692c0,6.26093-5.09381,11.35526-11.35522,11.35526ZM473.16803,1.89625c-53.01779,0-95.99719,42.97942-95.99719,95.99722V410.96692c0,5.22406,4.23495,9.45901,9.45901,9.45901h221.40811c5.22406,0,9.45898-4.23492,9.45898-9.45898V11.35525c0-5.22407-4.23492-9.45901-9.45898-9.45901h-134.86993Z" fill="#e6e6e6" />
        <circle cx="374.6018" cy="146.30627" r="13" fill="#6c63ff" />
    </g>
    
    <!-- 右上线+点 -->
    <g class="aircraft__line aircraft__line--top">
        <path d="M618.24402,105.3093c0,.67684,.75897,1.2203,1.70404,1.2203h292.52301c.94501,0,1.70398-.54346,1.70398-1.2203,0-.67678-.75897-1.2203-1.70398-1.2203h-292.52307c-.94513,0-1.70404,.54352-1.70404,1.2203h.00006Z" fill="#e6e6e6" />
        <circle cx="734.41626" cy="103.75365" r="13" fill="#6c63ff" />
    </g>
    
    <!-- 左下线+点   -->
    <g class="aircraft__line aircraft__line--bottom">
        <path d="M80.244,390.3093c0,.67685,.75895,1.22031,1.70405,1.22031H374.4711c.94501,0,1.70398-.54346,1.70398-1.22031,0-.67679-.75894-1.22031-1.70398-1.22031H81.94805c-.9451,0-1.70405,.54352-1.70405,1.22031Z" fill="#e6e6e6" />
        <circle cx="196.41629" cy="388.75366" r="13" fill="#6c63ff" />
    </g>
    
    <!--  机舱  -->
    <g class="aircraft__room">
        <polygon points="509.44403 216.18808 504.37772 104.72817 496.41629 122.09854 497.8638 219.8069 509.44403 216.18808" fill="#6c63ff" />
        <path d="M560.01367,217.89745l-1.64294,12.10632-.854,65.16789c-.06519,4.84918-.65143,9.64053-1.75153,14.28714-3.1701,13.53439-10.57422,25.84564-21.51038,34.76971-9.92279,8.10614-23.45718,14.24365-41.37039,13.15802-47.76852-2.89505-51.9881-43.54901-51.9881-43.54901l1.80219-73.72276,.24609-10.11098,2.1713-18.24385s5.79013-51.38736,59.34879-49.93983c53.55869,1.44753,55.54898,56.07735,55.54898,56.07735Z" fill="#6c63ff" />
        <!--  前窗    -->
        <g class="aircraft__window">
            <polygon points="456.69611 200.90344 467.55261 183.53307 481.30414 179.19048 528.34894 179.19048 539.9292 183.53307 550.43805 200.90344 531.24396 192.21826 477.40039 192.21826 456.69611 200.90344" fill="#e6e6e6" />
            <rect x="460.31845" y="185.7903" width="37.36307" height="1.99969" transform="translate(170.83368 598.33002) rotate(-74.47739)" fill="#6c63ff" />
            <rect x="529.99975" y="174.10844" width="2.00043" height="37.3632" transform="translate(-27.20847 106.00117) rotate(-11.11698)" fill="#6c63ff" />
        </g>
    </g>
    
    <!--  后翼  -->
    <g class="aircraft__rearwing">
        <!--  左后翼    -->
        <polygon class="aircraft__rearwing aircraft__rearwing--left" points="444.39209 231.78143 332.93219 226.71507 350.30258 218.75365 448.01093 220.20119 444.39209 231.78143" fill="#6c63ff" />
        
        <!-- 右后翼     -->
        <polygon class="aircraft__rearwing aircraft__rearwing--right" points="549.33813 231.78143 660.79803 226.71507 643.42767 218.75365 545.7193 220.20119 549.33813 231.78143" fill="#6c63ff" />
    </g>
    
    <!--  前翼  -->
    <g class="aircraft__frontwing">
        <!--  左前翼   -->
        <g class="aircraft__frontwing aircraft__frontwing--left">
            <polygon class="aircraft__frontwing--splint aircraft__frontwing--splint-top" points="0 243.03156 13.4609 237.96519 431.36432 248.82169 448.73471 240.86026 441.49704 290.07632 109.53795 254.70364 0 243.03156" fill="#6c63ff" />
            <polygon class="aircraft__frontwing--splint aircraft__frontwing--splint-bottom" points="107.4792 271.6203 109.53795 254.70364 441.49704 290.07632 439.68762 315.04623 107.4792 271.6203" fill="#3f3d56" />
            
            <!--  左发动机    -->
            <g class="aircraft__engine aircraft__engine--left">
                <ellipse cx="330.76089" cy="285.00998" rx="34.37888" ry="36.55017" fill="#3f3d56" />
                <circle cx="330.76089" cy="278.49609" r="25.33179" fill="#6c63ff" />
            </g>
        </g>
         
        <!--  右前翼  -->
        <g class="aircraft__frontwing aircraft__frontwing--right">
            <polygon class="aircraft__frontwing--splint aircraft__frontwing--splint-top" points="993.73022 243.03156 980.26935 237.96519 562.36591 248.82169 544.99554 240.86026 552.23315 290.07632 884.19226 254.70364 993.73022 243.03156" fill="#6c63ff" />
            <polygon class="aircraft__frontwing--splint aircraft__frontwing--splint-bottom" points="886.25104 271.6203 884.19226 254.70364 552.23315 290.07632 554.0426 315.04623 886.25104 271.6203" fill="#3f3d56" />
      
            <!-- 右发动机     -->
            <g class="aircraft__engine aircraft__engine--right">
                <ellipse cx="662.96936" cy="285.00998" rx="34.37885" ry="36.55017" fill="#3f3d56" />
                <circle cx="662.96936" cy="278.49609" r="25.33179" fill="#6c63ff" />
            </g>
        </g>
    </g>
    
    <!--  左轮  -->
    <g class="aircraft__leg aircraft__leg--left">
        <polygon points="380.33884 279.58173 383.23392 356.30087 376.18716 356.30087 376.18716 364.98608 395.88272 364.98608 395.88272 356.30087 390.13818 356.30087 390.54849 279.58173 380.33884 279.58173" fill="#3f3d56" />
        <path d="M372.73932,343.99686h-.00003c2.99792,0,5.42825,2.43033,5.42825,5.42825v22.43671c0,2.99792-2.43033,5.42825-5.42825,5.42825h.00003c-2.99792,0-5.42825-2.43033-5.42825-5.42825v-22.43671c0-2.99792,2.43033-5.42825,5.42825-5.42825Z" fill="#3f3d56" />
        <path d="M400.2424,343.99686h-.00003c2.99792,0,5.42825,2.43033,5.42825,5.42825v22.43671c0,2.99792-2.43033,5.42825-5.42825,5.42825h.00003c-2.99792,0-5.42825-2.43033-5.42825-5.42825v-22.43671c0-2.99792,2.43033-5.42825,5.42825-5.42825Z" fill="#3f3d56" />
    </g>
    
    <!--  中间轮  -->
    <g class="aircraft__leg aircraft__leg--middle">
        <polygon points="496.50888 325.78528 498.36609 375.00134 493.84552 375.00134 493.84552 380.57297 506.48041 380.57297 506.48041 375.00134 502.79523 375.00134 503.05847 325.78528 496.50888 325.78528" fill="#3f3d56" />
        <path d="M491.6337,367.10818h0c1.92322,0,3.48227,1.55905,3.48227,3.48227v14.39337c0,1.92322-1.55905,3.48227-3.48227,3.48227h0c-1.92322,0-3.48227-1.55905-3.48227-3.48227v-14.39337c0-1.92322,1.55905-3.48227,3.48227-3.48227Z" fill="#3f3d56" />
        <path d="M509.27719,367.10818h0c1.92322,0,3.48227,1.55905,3.48227,3.48227v14.39337c0,1.92322-1.55905,3.48227-3.48227,3.48227h0c-1.92322,0-3.48227-1.55905-3.48227-3.48227v-14.39337c0-1.92322,1.55905-3.48227,3.48227-3.48227Z" fill="#3f3d56" />
    </g>
    
    <!--  右轮  -->
    <g class="aircraft__leg aircraft__leg--right">
        <polygon points="613.39136 279.58173 610.49634 356.30087 617.54303 356.30087 617.54303 364.98608 597.84753 364.98608 597.84753 356.30087 603.59204 356.30087 603.1817 279.58173 613.39136 279.58173" fill="#3f3d56" />
        <rect x="615.56262" y="343.99686" width="10.85651" height="33.29321" rx="5.42822" ry="5.42822" fill="#3f3d56" />
        <rect x="588.05963" y="343.99686" width="10.85651" height="33.29321" rx="5.42822" ry="5.42822" fill="#3f3d56" />
    </g>
</svg>

接着，先给整架飞机（svg 元素）添加一个飞行的动画 fly ：

CSS
@layer animation {
    @keyframes fly {
        0% {
            scale: 0.1;
            opacity: 0.3;
        }
        5% {
            scale: 0.2;
        }
        10% {
            rotate: -20deg;
            scale: 0.2;
            opacity: 0.5;
        }
        15% {
            scale: 0.4;
        }
        20% {
            scale: 0.5;
            opacity: 1;
        }
        25% {
            scale: 0.6;
        }
        30% {
            scale: 0.6;
        }
        40% {
            rotate: -20deg;
            scale: 1;
        }
    
        80% {
            rotate: 20deg;
        }
        100% {
            rotate: -20deg;
        }
    }
  
    .aircraft {
        transform-box: fill-box;
        transform-origin: center;
        animation: fly 4s infinite ease-in-out;
    }
}

然后给飞机顶部和底部的紫色小圆球添加滑动动效。注意，需要先在 SVG 代码中找到这两个小圆球，并且给它定义一个类名：

SVG
<!-- 右上线+点 -->
<g class="aircraft__line aircraft__line--top">
    <path d="M618.24402,105.3093c0,.67684,.75897,1.2203,1.70404,1.2203h292.52301c.94501,0,1.70398-.54346,1.70398-1.2203,0-.67678-.75897-1.2203-1.70398-1.2203h-292.52307c-.94513,0-1.70404,.54352-1.70404,1.2203h.00006Z" fill="#e6e6e6" />
    <circle cx="734.41626" cy="103.75365" r="13" fill="#6c63ff" class="ball" />
</g>
 
<!-- 左下线+点   -->
<g class="aircraft__line aircraft__line--bottom">
    <path d="M80.244,390.3093c0,.67685,.75895,1.22031,1.70405,1.22031H374.4711c.94501,0,1.70398-.54346,1.70398-1.22031,0-.67679-.75894-1.22031-1.70398-1.22031H81.94805c-.9451,0-1.70405,.54352-1.70405,1.22031Z" fill="#e6e6e6" />
    <circle cx="196.41629" cy="388.75366" r="13" fill="#6c63ff" class="ball" />
</g>
CSS
@keyframes ball {
    0%, 100% {
        translate: 150px;
    }
    50%{
        translate: -20px;
    }
}
 
.ball{
    animation: ball 3s linear alternate infinite;
}

你也可以按相似的方法，给中间的紫色小圆球添加移动动效：

CSS
@keyframes move {
    0%,
    100% {
        translate: 0 50px;
    }
    50% {
        translate: 0 -60px;
    }
}
  
.ball--middle {
    animation: move 3s linear alternate infinite;
}

你可以使用类似的方式，给飞机其他部位添加动画效果，比如给发动机和机舱内的灯光添加动画效果：

CSS
@keyframes flash {
    0% {
        fill: yellow;
    }
    20% {
        fill: pink;
    }
    40% {
        fill: blue;
    }
    60% {
        fill: orange;
    }
    80% {
        fill: red;
    }
    100% {
        fill: purple;
    }
}
 
.window {
    animation: flash 0.2s infinite steps(5, jump-none);
}
 
@keyframes flash2 {
    0% {
        fill: purple;
    }
    50% {
        fill: orange;
    }
    100% {
        fill: red;
    }
}
 
.engine {
    animation: flash2 0.2s infinite steps(3, jump-none);
}

最终你看到的效果如下：

Demo 地址：https://codepen.io/airen/full/mdgdJXX

你也可以像 @Lisi 提供的案例那样，为 undraw 平台上的 SVG 插图添加交互动画效果，例如换肤动效：

Demo 地址：https://codepen.io/lisilinhart/full/NVKOPo （来源于 @Lisi）

给神奇猫吉祥物添加动画效果

Web 前端开发者应该对 smashingmagazine.com 网站不会感到陌生。在这个网站上随处可见到不同类型的神奇猫吉祥物：

URL: smashingmagazine.com

这些吉祥猫都是由 SVG 绘制的。在这个基础上，我们可以通过使用 CSS 为它们添加一些微妙的交互动画效果，使这些静态的“猫”变得更为可爱。例如：

Demo 地址：https://codepen.io/smashingmag/full/xxJWrOB

Demo 地址：https://codepen.io/smashingmag/full/gOjzMap

接下来，我们以第二个效果为例，来看看 CSS 是如何给“猫”赋予生命。

这只神奇猫在扮演一名咖啡师，整个效果是具有一些互动性，并且伴随着一些微妙的动画效果：

  • 神奇猫的眼睛会随着鼠标移动
  • 单击神奇猫的帽子时，帽子会上下摆动
  • 单击神奇猫的领结时，领结会有一个旋转动画
  • 单击咖啡机手柄时，咖啡会倒入杯子中

整个效果看上去很复杂，其实并没有大家想象的那么困难。我们先从静态的 SVG 着手。你可以基于上面的示例，或者在 smashingmagazine.com 官网上找到所需要的 SVG 代码：

SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 370 350" class="cat">
    <g class="cls-1">
        <g id="Layer_1" data-name="Layer 1">
            <circle class="cls-2" cx="179.9154" cy="173.92845" r="166.46094" />
            <path class="cls-3" d="M315.21979,188.52607a134.50481,134.50481,0,0,1-15.73,50.95q-1.155,2.115-2.37988,4.18c-.71973,1.22-1.46,2.43-2.21973,3.62-.1001.16-.20019.32-.30029.47q-2.29469,3.57-4.79,6.97-2.77515,3.765-5.77979,7.32v.01c-.47021.55-.94042,1.1-1.41992,1.65a136.40258,136.40258,0,0,1-16.47021,15.87c-.12988.11-.26026.21-.39014.32-.29.24-.56982.47-.85986.7-1.02979.82-2.08008,1.63-3.14014,2.41-.37988.29-.77.58-1.16015.86-.4795.36-.96973.71-1.46,1.05-.32959.25-.65966.48-1,.71-.00976.01-.01953.01-.02978.02-.64014.45-1.29.9-1.93994,1.34q-2.23536,1.5-4.54,2.91c-1.6001.99-3.21973,1.95-4.85986,2.86-.39991.23-.81006.45-1.21.67-1.20019.66-2.3999,1.29-3.62011,1.91-.06006.03-.10987.05-.16016.08-.75.38-1.50976.75-2.27,1.11-.0498.02-.08984.05-.13965.07q-1.08031.51-2.16015,1.02c-.77.35-1.54.7-2.32032,1.04-.61962.27-1.25.54-1.87988.8-.25976.11-.52978.22-.79.33-.67969.28-1.35986.55-2.04.82-.21972.09-.4497.18-.66992.27-.12012.04-.23.09-.34961.13-.30029.11-.61035.23-.91015.34-.36036.13-.71.26-1.07032.39-.29.11-.58007.22-.86963.32-.27.1-.53027.19-.80029.28-.59961.21-1.19971.42-1.81006.62a.55453.55453,0,0,1-.11963.04c-.62011.21-1.25.41-1.88037.61-.3999.13-.81006.26-1.21.38q-3.78,1.17-7.66992,2.11c-.58984.14-1.16992.28-1.75977.41-.03027.01-.06.01-.09033.02-.16992.04-.34961.08-.52.12-.48.11-.96.21-1.43994.31-.25976.06-.52.12-.79.17-.3999.08-.7998.16-1.21.24-.44971.09-.8999.18-1.34961.26q-.84081.165-1.68017.3c-.0503.01-.10987.02-.16993.03-1.07031.18-2.14013.35-3.22021.51-1.02.15-2.04.29-3.06006.41-.11963.01-.23.03-.3501.04-.06982.01-.1499.02-.21972.03-.78028.1-1.58008.19-2.37012.27a135.28868,135.28868,0,0,1-18.27979.58c-2.36035-.08-4.75-.23-7.14013-.44-.62012-.05-1.24024-.11-1.85987-.17-.41015-.05-.81-.09-1.21044-.13-.38965-.05-.77979-.09-1.16993-.14-.06982-.01-.1499-.02-.21972-.03-.41016-.04-.82032-.1-1.22022-.15q-.46509-.06-.92969-.12c-.87011-.12-1.74023-.25-2.60009-.38-.74024-.12-1.49024-.24-2.23-.37-.33008-.06-.64991-.12-.98-.18a.49659.49659,0,0,1-.16016-.03c-1.04981-.19-2.1001-.38995-3.1499-.61-1.06983-.22-2.14014-.46-3.21-.71q-1.59009-.375-3.18018-.78c-.58984-.15-1.17969-.31-1.77-.47-.10986-.03-.23-.06005-.33984-.09-.33008-.09-.64991-.18-.98-.28-.54981-.15-1.1001-.31-1.64991-.47-.32031-.1-.64013-.19-.96044-.3q-.69-.195-1.37989-.42c-.68994-.22-1.38965-.45-2.08008-.68l-.08984-.03c-.75-.24-1.5-.5-2.23975-.77-.57031-.2-1.13037-.41-1.70019-.63-.19971-.07-.3999-.15-.60986-.22-3.77-1.43-7.47022-3.01-11.07032-4.75-.0498-.03-.10986-.05-.15966-.08-.29-.14-.58008-.29-.87012-.43-1.04-.51-2.06006-1.04-3.08008-1.57-1.93994-1.02-3.85986-2.09-5.73975-3.2-1.88037-1.12-3.73046-2.27-5.55029-3.47s-3.6001-2.44-5.35986-3.73c-.33008-.24-.66992-.49-1-.75-1.41016-1.04-2.79-2.12-4.16016-3.22-.59961-.47-1.18994-.96-1.77978-1.45-.51026-.42-1.01026-.85-1.51026-1.28-.21-.18-.40967-.35-.60986-.53-.33008-.29-.66992-.58-1-.88-.43994-.39-.87988-.78-1.31006-1.19-.18994-.16-.37988-.33-.56006-.5l-.00976-.01c-.59034-.54-1.16993-1.09-1.74024-1.63995-.12988-.12-.25-.24-.36963-.36005-.56006-.53-1.11035-1.06995-1.66015-1.62-.41993-.42-.8501-.86-1.27-1.29l-.29-.29c-.16016-.16-.31006-.32-.47022-.49-.40966-.42-.81982-.85-1.21-1.28-.48-.51-.96-1.03-1.42969-1.55-.47021-.52-.94042-1.04-1.40039-1.57-.35986-.4-.6997-.8-1.0498-1.2-.52-.6-1.02979-1.21-1.54-1.82-.06982-.09-.1499-.18-.23-.28-.6499-.78-1.27979-1.57-1.90967-2.37-.1001-.13-.21045-.27-.31054-.4-.56983-.72-1.11963-1.44-1.65967-2.17-.62989-.84-1.25-1.69-1.85987-2.54-.05029-.06-.09033-.13-.14013-.19-.60987-.86-1.2002-1.72-1.79-2.6-.31006-.45-.60987-.9-.91992-1.36-.3003-.46-.6001-.92-.89014-1.38-.60986-.95-1.21-1.9-1.79981-2.87-.5-.82-.99023-1.64-1.47021-2.48q-2.31006-3.99-4.3501-8.13c-.05957-.13-.10986-.25-.16992-.37-.25-.51-.5-1.03-.73975-1.54-.83007-1.76-1.63037-3.55-2.38037-5.35q-1.48461-3.51-2.75976-7.13a132.77589,132.77589,0,0,1-4.91992-17.63,135.57838,135.57838,0,0,1-2.4502-17.78c-.0498-.78-.1001-1.56-.13965-2.34,0-.04-.01025-.09-.01025-.13-.02979-.61-.06006-1.22-.08008-1.83-.04-1.17-.06982-2.35-.08008-3.54-.02978-2.35.01026-4.72.1001-7.1.03027-.88.08008-1.75.12988-2.63.06006-.97.12989-1.95.21-2.93.02-.27.04-.53.06006-.8.03028-.27.05029-.54.08008-.81.02979-.37.06982-.74.1001-1.12q.10473-1.08.24023-2.16.08936-.82506.21-1.65.08935-.795.21-1.59.12012-.9.26954-1.8.12011-.825.2705-1.65c.19971-1.24.42969-2.47.66992-3.7.12012-.58.23975-1.17.35987-1.76q.87012-4.14,1.98974-8.18.3003-1.09506.63038-2.19c.15966-.57.32959-1.13.50976-1.69.1499-.5.31006-.99.47022-1.49.04-.13.08007-.27.12988-.4.16015-.49.31982-.98.49023-1.47q.20947-.61506.41992-1.23c.21973-.62.44-1.25.66993-1.87.02978-.07.0498-.15.08007-.22.42969-1.18.87989-2.34,1.33985-3.5q.43506-1.09506.8999-2.19c.21-.51.43018-1.03.66016-1.54.16992-.4.35009-.8.52978-1.19995.5503-1.24005,1.12989-2.47,1.72022-3.69.22021-.47.4497-.93.68017-1.39q2.80445-5.625,6.09961-10.93c.44043-.71.87989-1.41,1.34033-2.11.40967-.64.83985-1.28,1.25977-1.92.5-.74,1.01025-1.48,1.52-2.21.2998-.44.60986-.87.91992-1.30005.74024-1.04,1.5-2.06,2.28027-3.08.35987-.48.73-.95,1.09961-1.42.12012-.16.25-.31995.37012-.47.43994-.55.87012-1.1,1.32031-1.64.56983-.7,1.13965-1.39,1.73-2.08.23-.28.46973-.56.71-.83.5498-.63,1.10009-1.26,1.65966-1.89.4502-.51.91016-1.01,1.38037-1.51.39991-.43.78956-.85,1.19-1.27a134.19438,134.19438,0,0,1,11.41015-10.71c.31983-.27.63965-.54.96973-.8.87012-.72,1.75976-1.43,2.6499-2.12.8501-.67,1.71-1.32,2.58008-1.96.06006-.05.12012-.09.18017-.14.88965-.66,1.79981-1.31,2.71-1.94.91992-.65,1.85986-1.29,2.7998-1.92.46-.3.91016-.6,1.37012-.9.29-.19.58984-.38.89013-.57.40967-.26.81983-.52,1.23975-.78.29981-.19.61035-.38.91016-.56.50976-.31,1.02978-.62,1.54-.93.52-.3,1.04-.61,1.56-.91.46-.27.92969-.53,1.39991-.79.46972-.26.93994-.52,1.41992-.78.93017-.51,1.87988-1,2.81982-1.49.03028-.01.0503-.03.08008-.04.34033-.18.68018-.35,1.03027-.52,1.00977-.51,2.02-1,3.03956-1.48a.45885.45885,0,0,0,.10009-.05c.99024-.46,1.98-.91,2.98-1.35.5503-.24,1.11035-.48,1.66016-.72a.78392.78392,0,0,0,.16016-.07c1.06-.44,2.12988-.88,3.1997-1.3.56006-.22,1.12012-.44,1.68994-.65q5.23536-1.98,10.67041-3.52c.71-.21,1.41993-.4,2.13965-.59q5.20533-1.395,10.57032-2.37a134.67622,134.67622,0,0,1,24.04-2.16c2.87989,0,5.77979.1,8.69.28q2.54955.165,5.09961.42c.47021.05.93017.1,1.40039.16a134.4488,134.4488,0,0,1,50.66992,16.19c.25976.14.52.29.77978.44,1.99024,1.12,3.93994,2.3,5.86035,3.52a133.5623,133.5623,0,0,1,11.37989,8.09q4.78491,3.795,9.18994,7.99a134.83946,134.83946,0,0,1,14.50976,16.18c1.22022,1.61,2.40039,3.23,3.54,4.88,1.47022,2.12,2.87012,4.28,4.22022,6.48A134.34723,134.34723,0,0,1,315.21979,188.52607Z" />
            <polygon class="cls-4" points="259.376 250.904 254.233 220.286 223.312 218.629 219.586 250.284 223.312 273.687 256.555 266.904 259.376 250.904" />
            <path class="cls-4" d="M278.14094,237.05932c26.72539,4.63328,51.01311-11.39363,52.05521-12.09191l-4.07911-6.08248,2.03955,3.04124-2.03637-3.04287c-.23628.15718-23.91438,15.73019-48.25619,10.66965-13.152-2.725-24.27339-11.00026-33.05517-24.59647L238.65758,208.93c9.89791,15.32406,22.60817,24.67894,37.77682,27.80585C277.00279,236.85257,277.57477,236.96116,278.14094,237.05932Z" />
            <path class="cls-4" d="M173.51432,233.36576c26.72539,4.63328,51.01311-11.39363,52.05521-12.09191l-4.07911-6.08248,2.03956,3.04124-2.03637-3.04287c-.23628.15718-23.91439,15.73018-48.2562,10.66965-13.152-2.725-24.27339-11.00026-33.05517-24.59647l-6.15128,3.97355c9.89791,15.32406,22.60817,24.67894,37.77682,27.80585C172.37618,233.159,172.94815,233.2676,173.51432,233.36576Z" />
            <path class="cls-5" d="M325.66252,227.72191c-.22484,3.29545-.52652,9.03425,2.6955,11.08688,6.20459,3.97569,4.76347-8.29672,4.5097-11.85069a88.148,88.148,0,0,0,4.60165,12.78868,26.307,26.307,0,0,0,3.72778,6.27021c1.17044,1.32663,4.29616,4.1862,6.1811,2.49436,1.87135-1.67965-.01209-6.2414-.7806-8.11576a24.20157,24.20157,0,0,0-11.81493-12.4021c3.90945,1.80668,7.86443,3.52263,11.91034,5.0027a62.451,62.451,0,0,0,7.84321,2.40176c2.06121.45891,5.10294,1.26,7.07506.03821,5.56438-3.44907-7.52932-8.68112-9.57613-9.506-8.02277-3.23336-14.69474-3.73117-23.27048-3.986l-.608-.01807c.13408-4.27635.92365-17.8276-5.008-18.86023-7.75576-1.08683-1.40238,17.569,2.27921,20.49117Z" />
            <path class="cls-6" d="M225.759,263.76456c1.69141,0,1.9043-1.45068,2.22168-3.604.17871-1.21192.4209-2.94385.7041-5.022.56543-4.14258,1.2959-9.667,2.01856-15.19189,1.07812-8.23389,2.13867-16.46875,2.60937-20.12695l12.11719,1.43505,5.00195,38.9961,3.9668-.50879-5.39844-42.09277-19.15136-2.26807-.251,1.96484c-2.14941,16.76709-5.47656,42.28907-5.83691,43.87842a1.97688,1.97688,0,0,1,2.1416-1.45019l-.21582,1.92334h-2.01465l1.88086,2.06C225.62421,263.76261,225.69257,263.76456,225.759,263.76456Z" />
            <polygon class="cls-4" points="227.611 208.888 174.636 188.818 160.206 125.256 155.947 105.01 133.497 67.759 144.664 57.886 180.115 63.237 219.442 79.028 265.635 39.088 289.031 18.895 290.02 71.641 315.644 111.27 310.549 153.258 274.957 198.368 227.611 208.888" />
            <path class="cls-7" d="M347.27464,130.633s-5.26682-19.12157-27.25842-28.77353c0,0,8.348-1.476,11.03336-.16994a45.0095,45.0095,0,0,0-23.84032-11.51277L299.038,65.16363l11.31686,1.53793s-1.3596-4.0653-12.69544-7.991c4.99327-15.2437-3.18877-40.3528-3.18877-40.3528-34.74,2.358-44.01594,22.18733-46.0572,28.28053a159.28024,159.28024,0,0,0-30.319,9.28179s6.27175-7.91879,14.18148-10.43286a48.97651,48.97651,0,0,0-36.853,18.95255s-37.34025-17.18779-67.5786-2.0952c0,0-.12827,16.54626,27.91917,52.46076,0,0-19.53094,18.54183-21.86959,36.98752,0,0,9.38014-17.87607,16.0289-22.63475,0,0-23.44985,36.35165-7.015,58.27367,0,0-2.41964-15.066,1.39772-20.20289,0,0,.31821,14.33614,5.63988,26.02857q-.39016-.17318-.78637-.339a13.99352,13.99352,0,0,1,2.06235,2.09062c.05384.06718.09124.13185.14321.19888a37.465,37.465,0,0,1,6.2182,1.19641c-1.56266-4.35777-2.722-9.13589-1.81932-12.21976a132.03724,132.03724,0,0,0,6.69661,14.04764c.8014.36039,1.60892.69887,2.39291,1.1219,4.81462,2.5972,9.36581,5.38,13.86545,8.38861q3.71024.40036,7.41822.82007c11.88848,3.16689,19.72362,6.04308,32.71868,7.30569,11.88472,1.1546,23.58743,2.59763,35.378,4.41735,5.67534.87559,9.69518-.849,15.92521-1.85815,8.49681-1.37623,13.41018-5.34364.18322,2.00518a51.5517,51.5517,0,0,1,10.98354-4.5393c-.04893-.026-.14305-.07692-.14305-.07692l-.00488-.00466c.74112-.32743,1.48849-.66207,2.24519-1.01477a28.64161,28.64161,0,0,0,5.58175-3.47654c4.68029-3.57449,11.38869-10.28679,16.43078-21.83253,0,0-1.07956,12.645-2.75115,14.77077,0,0,14.72274-12.69623,16.57-27.08576,0,0-.3958,12.76466-1.22612,15.35089,0,0,15.66644-17.56277,18.26795-38.77867,0,0,.94351,7.3257.29151,8.819,0,0,17.95159-11.61649,2.05263-36.22613A12.27794,12.27794,0,0,1,347.27464,130.633ZM161.45233,98.89322c-12.50561-7.98984-20.85323-29.35366-20.85323-29.35366,15.2518-7.83491,39.65149,4.70372,39.65149,4.70372C169.112,83.52674,161.45233,98.89322,161.45233,98.89322Zm94.24419,49.17718c-14.46908,3.77442-30.39073-4.01149-34.9536-21.5039-4.56206-17.49345.56719-45.85331,15.03586-49.62709,14.46847-3.77358,32.79746,18.4675,37.36095,35.95968C277.70114,130.39151,270.16394,144.29644,255.69652,148.0704Zm31.13939-85.41689s-19.187-11.613-26.33792-13.34989c-3.08505-.74936,6.78881-16.73518,26.05358-20.34185C286.55157,28.96177,294.43363,52.42021,286.83591,62.65351Z" />
            <path class="cls-7" d="M143.53707,167.88634s2.94277,37.57937,22.69638,52.17733c0,0-7.27475-15.08675-8.22421-22.26774,0,0,10.154,28.8757,54.35528,32.89173a52.21394,52.21394,0,0,1-21.4166-14.39932s58.24053,24.58555,97.1438-4.27379L206.72486,197.6249s-38.80288-31.69666-39.67315-31.72939C166.18187,165.863,143.53707,167.88634,143.53707,167.88634Z" />
            <path class="cls-4" d="M223.50917,188.65625c17.48864,6.3957,38.20423,4.106,61.67022-6.83477a.98548.98548,0,0,0-.83288-1.78633c-25.06784,11.687-46.84908,13.32114-64.73783,4.85414-27.83187-13.17195-36.68937-46.68854-36.77573-47.02557a.98558.98558,0,0,0-1.9097.48836c.08838.346,9.18293,34.75523,37.842,48.3186Q221.09622,187.774,223.50917,188.65625Z" />
            <path class="cls-4" d="M170.2957,142.10586s3.855-27.72581,21.78357-8.324c0,0-15.42785-13.26659-21.68323,12.61008" />
            <path class="cls-4" d="M282.068,135.7645c-11.273,6.13821,16.80639,11.38125,16.80639,11.38125s5.2548-8.98973,6.1515-16.53648C305.92108,123.05924,293.3389,129.62468,282.068,135.7645Z" />
            
            <!-- 眼睛 -->
            <ellipse class="cls-5 eye eye-left" cx="245.15133" cy="134.57033" rx="5.31264" ry="8.61816" transform="translate(-33.47349 110.5587) rotate(-23.83807)" />
            <ellipse class="cls-4 eye eye-right" cx="284.42686" cy="116.68559" rx="5.31264" ry="8.61816" transform="translate(-22.89477 124.9063) rotate(-23.83807)" />
            <path class="cls-6" d="M266.13,279.56611c-.12988.11-.26026.21-.39014.32-.29.24-.56982.47-.85986.7-1.02979.82-2.08008,1.63-3.14014,2.41-.37988.29-.77.58-1.16015.86-.4795.36-.96973.71-1.46,1.05-.32959.25-.65966.48-1,.71-.00976.01-.01953.01-.02978.02-.64014.45-1.29.9-1.93994,1.34q-2.23536,1.5-4.54,2.91c-1.6001.99-3.21973,1.95-4.85986,2.86-.39991.23-.81006.45-1.21.67-1.20019.66-2.3999,1.29-3.62011,1.91-.06006.03-.10987.05-.16016.08-.75.38-1.50976.75-2.27,1.11-.0498.02-.08984.05-.13965.07q-1.08031.51-2.16015,1.02c-.77.35-1.54.7-2.32032,1.04-.61962.27-1.25.54-1.87988.8-.25976.11-.52978.22-.79.33-.67969.28-1.35986.55-2.04.82-.21972.09-.4497.18-.66992.27-.12012.04-.23.09-.34961.13-.30029.11-.61035.23-.91015.34-.36036.13-.71.26-1.07032.39-.29.11-.58007.22-.86963.32-.27.1-.53027.19-.80029.28-.59961.21-1.19971.42-1.81006.62a.55453.55453,0,0,1-.11963.04c-.62011.21-1.25.41-1.88037.61-.3999.13-.81006.26-1.21.38q-3.78,1.17-7.66992,2.11c-.58984.14-1.16992.28-1.75977.41l8.54981-56.21c17.23,20.13,39.79.62,39.79.62Z" />
            <!-- 领结 -->
            <g class="bowtie">
                <circle class="cls-8" cx="238.50684" cy="226.75252" r="4.06892" />
                <path class="cls-8" d="M239.20927,225.51358s20.27589-16.85076,20.594,1.23894-20.594,1.94957-20.594,1.94957Z" />
                <path class="cls-8" d="M237.33565,225.51358s-20.2759-16.85076-20.594,1.23894,20.594,1.94957,20.594,1.94957Z" />
            </g>
            
            <!-- 帽子 -->
            <g class="hat">
                <path class="cls-6" d="M244.86771,35.36165l-7.21382-21.5304c1.7851-2.19439,3.53774-5.17554.63441-5.90132-3.21881-.8049-3.39455,3.3559-3.17908,6.09426L186.8593,31.74847c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993Z" />
                <path class="cls-9" d="M204.46087,42.10518q-3.9016-6.97785-7.80373-13.956l-9.79784,3.59927c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993,14.29468-5.17506A31.8992,31.8992,0,0,1,204.46087,42.10518Z" />
            </g>
            
            <path class="cls-4" d="M249.57278,283.87816l-2.58651-15.09775a2.26132,2.26132,0,0,0-2.59953-1.84349l-2.549.43261c.28305.06719.568.13073.8444.21385a13.74666,13.74666,0,0,1,3.17246,1.34717l-1.66075,3.80356a6.84854,6.84854,0,0,0-4.49014-1.66024c-1.74389-.10127-2.66337.53929-2.74365,1.93483a1.86241,1.86241,0,0,0,.77918,1.5224,17.58016,17.58016,0,0,0,3.57772,1.99856,11.3739,11.3739,0,0,1,3.01076,1.90505,6.59585,6.59585,0,0,1,.90609,1.00859,6.0507,6.0507,0,0,1,1.01813,3.90294,5.77789,5.77789,0,0,1-1.41264,3.62068l2.88917-.4922A2.25536,2.25536,0,0,0,249.57278,283.87816Z" />
            <path class="cls-4" d="M240.26715,281.32651a13.80167,13.80167,0,0,0-3.32743-2.038,14.06035,14.06035,0,0,1-2.52363-1.54074,6.03985,6.03985,0,0,1-2.64885-5.22422,5.19534,5.19534,0,0,1,1.29149-3.29474,5.98132,5.98132,0,0,1,.44673-.43794l-4.22013.73037a2.24866,2.24866,0,0,0-1.84428,2.59673l2.59332,15.09416a2.24985,2.24985,0,0,0,2.59418,1.83561l1.735-.29356c-.04714-.01206-.09425-.024-.13839-.03676a17.20585,17.20585,0,0,1-3.22349-1.61631l2.01528-3.8796a7.95356,7.95356,0,0,0,4.96219,2.07252c1.9582.11245,2.96809-.5234,3.05076-1.91029A2.58281,2.58281,0,0,0,240.26715,281.32651Z" />
            <path class="cls-10" d="M62.65942,142.44872H149.386a0,0,0,0,1,0,0v25.1986a22.00673,22.00673,0,0,1-22.00673,22.00673H62.65942a0,0,0,0,1,0,0V142.44872A0,0,0,0,1,62.65942,142.44872Z" transform="translate(212.04541 332.10277) rotate(-180)" />
      
            <!-- 咖啡机手柄 -->
            <g class="lever">
                <rect class="cls-11" x="7.20433" y="208.9493" width="32.48263" height="14.88386" rx="6.32748" />
                <path class="cls-12" d="M31.63281,214.57153H61.083a0,0,0,0,1,0,0v3.6394a0,0,0,0,1,0,0H31.63281a1.8197,1.8197,0,0,1-1.8197-1.8197v0A1.8197,1.8197,0,0,1,31.63281,214.57153Z" />
            </g>
            
            <path class="cls-13" d="M128.74011,142.44872H149.386a0,0,0,0,1,0,0v30.57114a16.63419,16.63419,0,0,1-16.63419,16.63419h-4.01169a0,0,0,0,1,0,0V142.44872A0,0,0,0,1,128.74011,142.44872Z" transform="translate(278.12611 332.10277) rotate(-180)" />
            
            <!-- 咖啡 -->
            <rect class="coffee" x="139" y="243.99883" width="4" height="12.29272" transform="translate(281.84309 500.29037) rotate(-180)" fill="brown" />
            <rect class="cls-12" x="137.81171" y="243.99883" width="6.21967" height="12.29272" transform="translate(281.84309 500.29037) rotate(-180)" />
            <path class="cls-13" d="M72.90047,189.65405h80.54622a6.4224,6.4224,0,0,1,6.4224,6.4224v41.5a6.4224,6.4224,0,0,1-6.4224,6.4224H123.30454a7.35042,7.35042,0,0,0-7.35042,7.35042v36.89924a7.35042,7.35042,0,0,0,7.35042,7.35042h42.76771a6.4224,6.4224,0,0,1,6.42239,6.4224V319.917a6.42239,6.42239,0,0,1-6.42239,6.42239H72.90047Z" />
            <rect class="cls-14" x="147.13087" y="198.54044" width="27.98272" height="38.38717" transform="translate(322.24447 435.46804) rotate(-180)" />
            <rect class="cls-12" x="162.45431" y="198.54044" width="12.65929" height="38.38717" transform="translate(337.56791 435.46804) rotate(-180)" />
            <path class="cls-10" d="M46.82555,189.65405h80.54622a6.4224,6.4224,0,0,1,6.4224,6.4224v41.5a6.4224,6.4224,0,0,1-6.4224,6.4224H97.22962a7.35041,7.35041,0,0,0-7.35042,7.35042v36.89924a7.35041,7.35041,0,0,0,7.35042,7.35042h42.7677a6.4224,6.4224,0,0,1,6.4224,6.4224V319.917a6.42239,6.42239,0,0,1-6.4224,6.42239H46.82555Z" />
            <path class="cls-4" d="M93.35932,170.433h1.13243a8.82028,8.82028,0,0,1,8.82028,8.82028V188.856a0,0,0,0,1,0,0H84.539a0,0,0,0,1,0,0v-9.60269a8.82028,8.82028,0,0,1,8.82028-8.82028Z" />
            <path class="cls-4" d="M88.92485,180.99614a5.93825,5.93825,0,1,1-5.93755-5.82684A5.88958,5.88958,0,0,1,88.92485,180.99614Zm-1.99311,0A3.9448,3.9448,0,1,0,82.9873,184.866,3.91239,3.91239,0,0,0,86.93174,180.99614Z" />
            <path class="cls-9" d="M103.31211,179.1707V188.856h-5.4595c.72083-4.05912,1.57161-13.312-4.21375-18.42289h.7695A8.822,8.822,0,0,1,103.31211,179.1707Z" />
            <path class="cls-4" d="M93.35932,152.4734h1.13243a8.82028,8.82028,0,0,1,8.82028,8.82028v9.60269a0,0,0,0,1,0,0H84.539a0,0,0,0,1,0,0v-9.60269A8.82028,8.82028,0,0,1,93.35932,152.4734Z" />
            <path class="cls-4" d="M88.92485,163.03651a5.93824,5.93824,0,1,1-5.93755-5.82685A5.88958,5.88958,0,0,1,88.92485,163.03651Zm-1.99311,0a3.9448,3.9448,0,1,0-3.94444,3.86987A3.91239,3.91239,0,0,0,86.93174,163.03651Z" />
            <path class="cls-9" d="M103.31211,161.21106v9.68527h-5.4595c.72083-4.05912,1.57161-13.312-4.21375-18.42289h.7695A8.822,8.822,0,0,1,103.31211,161.21106Z" />
            <path class="cls-4" d="M140.42884,260.74655h2.12822a16.5763,16.5763,0,0,1,16.5763,16.5763v18.04673a0,0,0,0,1,0,0H123.85254a0,0,0,0,1,0,0V277.32285A16.5763,16.5763,0,0,1,140.42884,260.74655Z" transform="translate(282.9859 556.11612) rotate(-180)" />
            <path class="cls-4" d="M150.891,275.51791a11.16,11.16,0,1,1,11.15866,10.95061A11.06851,11.06851,0,0,1,150.891,275.51791Zm3.74573,0a7.41362,7.41362,0,1,0,7.41293-7.2728A7.35269,7.35269,0,0,0,154.63668,275.51791Z" />
            <path class="cls-9" d="M123.85239,278.94853v-18.2019h10.26026c-1.35468,7.62846-2.95359,25.01777,7.91906,34.62287h-1.44615A16.57945,16.57945,0,0,1,123.85239,278.94853Z" />
            <rect class="cls-13" x="81.14213" y="204.6012" width="32.46556" height="6.09138" rx="3.04569" transform="translate(194.74983 415.29379) rotate(-180)" />
            <rect class="cls-13" x="81.14213" y="214.68833" width="32.46556" height="6.09138" rx="3.04569" transform="translate(194.74983 435.46804) rotate(180)" />
            <rect class="cls-13" x="81.14213" y="224.77546" width="32.46556" height="6.09138" rx="3.04569" transform="translate(194.74983 455.6423) rotate(180)" />
            <path class="cls-15" d="M48.92694,182.62247a13.33836,13.33836,0,0,1,13.32324-13.32324h43.251a13.33836,13.33836,0,0,1,13.32324,13.32324v8.09814H48.92694Zm67.76465,0A11.20281,11.20281,0,0,0,105.50116,171.432h-43.251a11.20281,11.20281,0,0,0-11.19043,11.19043v5.96533h65.63184Z" />
            <path class="cls-10" d="M29.24755,242.90477H48.64418a0,0,0,0,1,0,0v64.96971a18.46492,18.46492,0,0,1-18.46492,18.46492h-.93171a0,0,0,0,1,0,0V242.90477a0,0,0,0,1,0,0Z" transform="translate(77.89173 569.24416) rotate(-180)" />
            <rect class="cls-10" x="150.89095" y="303.25693" width="14.77424" height="3.40416" rx="1.70208" transform="translate(316.55614 609.91803) rotate(180)" />
            <rect class="cls-10" x="150.89095" y="307.97316" width="14.77424" height="3.40416" rx="1.70208" transform="translate(316.55613 619.35047) rotate(-180)" />
            <rect class="cls-10" x="150.89095" y="312.68938" width="14.77424" height="3.40416" rx="1.70208" transform="translate(316.55613 628.78292) rotate(-180)" />
            <circle class="cls-14" cx="168.90638" cy="212.09065" r="4.30059" />
            <circle class="cls-14" cx="168.90638" cy="223.18912" r="4.30059" />
            <circle class="cls-16" cx="62.64755" cy="64.2249" r="42.93899" />
            <path class="cls-4" d="M72.28557,54.35609c.32491-1.63963-.1444-2.02169-1.75425-1.49014-4.36672,1.44185-8.77846,2.75049-13.19154,4.04659a2.38743,2.38743,0,0,0-1.99387,2.093c-.94671,5.397-2.05983,10.765-2.99547,16.16382-.90826,5.24081-4.00384,8.46657-9.0709,9.21292a8.41924,8.41924,0,0,1-8.16886-4.19017,6.01874,6.01874,0,0,1,3.79509-8.61841,9.31161,9.31161,0,0,1,9.76393,2.91008c.31429.36071.42594,1.16267,1.10653.92431.54655-.19142.54966-.8498.57938-1.38328.24915-4.47228.51621-8.94369.736-13.41743.15334-3.12173.27855-6.246.3378-9.3706.02161-1.13906.43228-1.76737,1.57207-1.92988q11.46094-1.634,22.91966-3.28352c1.45773-.20881,2.91947-.3912,4.37438-.61776,1.08056-.16827,1.59518.19839,1.39715,1.3366-.04043.23237-.09765.4619-.13541.69463-.55991,3.45022-.55724,3.477-3.99412,3.76075-.91629.07565-1.33651.37761-1.48569,1.33927-.91215,5.88012-1.94924,11.74123-2.82716,17.62621-1.00372,6.72819-7.903,10.78233-13.6273,7.919-3.2219-1.61159-4.777-4.75914-3.884-7.86121.77-2.67449,3.86333-4.435,7.23669-4.21656a8.90159,8.90159,0,0,1,6.64248,3.21439c.27808.33619.46216.93823,1.06724.73387.53484-.18064.53608-.7198.57-1.19251C71.60113,63.93951,71.94519,59.11878,72.28557,54.35609Z" />
            <polygon class="cls-16" points="99.74 82.814 119.887 105.191 89.623 94.003 99.74 82.814" />
        </g>
    </g>
</svg>

你需要在这些 SVG 的元素中找到相应的动画元素，并为其命名，例如：

SVG
<!-- 眼睛 -->
<ellipse class="cls-5 eye eye-left" cx="245.15133" cy="134.57033" rx="5.31264" ry="8.61816" transform="translate(-33.47349 110.5587) rotate(-23.83807)" />
<ellipse class="cls-4 eye eye-right" cx="284.42686" cy="116.68559" rx="5.31264" ry="8.61816" transform="translate(-22.89477 124.9063) rotate(-23.83807)" />
 
<!-- 领结 -->
<g class="bowtie">
    <circle class="cls-8" cx="238.50684" cy="226.75252" r="4.06892" />
    <path class="cls-8" d="M239.20927,225.51358s20.27589-16.85076,20.594,1.23894-20.594,1.94957-20.594,1.94957Z" />
    <path class="cls-8" d="M237.33565,225.51358s-20.2759-16.85076-20.594,1.23894,20.594,1.94957,20.594,1.94957Z" />
</g>
            
<!-- 帽子 -->
<g class="hat">
    <path class="cls-6" d="M244.86771,35.36165l-7.21382-21.5304c1.7851-2.19439,3.53774-5.17554.63441-5.90132-3.21881-.8049-3.39455,3.3559-3.17908,6.09426L186.8593,31.74847c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993Z" />
    <path class="cls-9" d="M204.46087,42.10518q-3.9016-6.97785-7.80373-13.956l-9.79784,3.59927c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993,14.29468-5.17506A31.8992,31.8992,0,0,1,204.46087,42.10518Z" />
</g>
 
<!-- 咖啡机手柄 -->
<g class="lever">
    <rect class="cls-11" x="7.20433" y="208.9493" width="32.48263" height="14.88386" rx="6.32748" />
    <path class="cls-12" d="M31.63281,214.57153H61.083a0,0,0,0,1,0,0v3.6394a0,0,0,0,1,0,0H31.63281a1.8197,1.8197,0,0,1-1.8197-1.8197v0A1.8197,1.8197,0,0,1,31.63281,214.57153Z" />
</g>
 
<!-- 咖啡 -->
<rect class="coffee" x="139" y="243.99883" width="4" height="12.29272" transform="translate(281.84309 500.29037) rotate(-180)" fill="brown" />

有了这个前提之后，我们就可以通过 CSS 和 JavaScript 为元素添加交互所需的动画效果。

首先要给神奇猫的眼睛添加跟随鼠标移动的动画效果。

就目前为止，实现跟随鼠标移动的动画效果有多种方式。比如像 @UCanCode 提供的案例那样，通过一些简单的 JavaScript 脚本来改变目标元素的位置：

Demo 地址：https://codepen.io/FauxyCoder/full/dyNErxd

你也可以像 @Adrian Payne 那样，基本第三方的 JavaScript 库来创建类似的交互动效：

Demo 地址：https://codepen.io/dazulu/full/Oapowz

这可能对于不熟悉 JavaScript 的开发者来说，是最简单，最便利的方式。正如 @Smashing Magazine 在 Codepen 上提供的演示案例，就是基于一个名为 watching-you 的第三方 JavaScript 库来实现的。

在 watching-you 库的基础上，对神奇猫的眼睛 .eye-left （左眼）和 .eye-right （右眼）添加跟随鼠标移动的动画效果：

JavaScript
const optionsLeft = { power: 4, rotatable: false };
const watcherLeft = new WatchingYou(".eye-left", optionsLeft);
watcherLeft.start();
 
const optionsRight = { power: 3, rotatable: false };
const watcherRight = new WatchingYou(".eye-right", optionsRight);
watcherRight.start();

前面示例提到过，transform-origin 是相对于 svg 的 viewBox ，如果你希望相对于元素自身的位置做旋转、变换等处理，需要将元素的 transform-box 属性设置为 fill-box 。例如，将 .eye 的 transform-box 属性设置为 fill-box ，以便于神奇猫的眼睛会在中心周围移动。

CSS
.eye {
    transform-box: fill-box;
    transform-origin: center center;
}

Demo 地址：https://codepen.io/airen/full/wvZvzdg

除此之外，你要是熟悉 CSS 的自定义属性的话，也可以像 @Natan 提供的案例一样，通过几行简单的 JavaScript 脚本来实现类似的交互动画效果：

Demo 地址：https://codepen.io/natan-sitanggang/full/YzpZXKR

也就是说，如果你感兴趣的话，可以在上面的示例基础上，使用 CSS 自定义属性和 JavaScript 来替代 watching-you 库，使神奇猫的眼睛也能跟随鼠标移动。

接下来给神奇猫的领结和帽子添加交互动效。神奇猫的帽子是由两个 <path> 元素组成，所以使用 <g> 元素对其进行分组，并且将其命名为 .hat :

SVG
<!-- 帽子 -->
<g class="hat">
    <path class="cls-6" d="M244.86771,35.36165l-7.21382-21.5304c1.7851-2.19439,3.53774-5.17554.63441-5.90132-3.21881-.8049-3.39455,3.3559-3.17908,6.09426L186.8593,31.74847c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993Z" />
    <path class="cls-9" d="M204.46087,42.10518q-3.9016-6.97785-7.80373-13.956l-9.79784,3.59927c-2.10436-1.76512-5.63916-4.08084-6.8534-.96892-1.01347,2.59767,1.90955,3.03108,4.59669,2.92741l10.14595,19.7993,14.29468-5.17506A31.8992,31.8992,0,0,1,204.46087,42.10518Z" />
</g>

与 .eye 元素（眼睛）类似，将其 transform-box 定义为 fill-box ：

CSS
.hat {
    transform-box: fill-box;
    transform-origin: center bottom;
    cursor: pointer;
}

并且为其定义一个 hatJump 动画：

CSS
@keyframes hatJump {
    0%,
    100% {
        rotate: 0 0 1 0deg;
        translate: 0 0;
    }
 
    50% {
        rotate: 0 0 1 -10deg;
        translate: 0 -50%;
    }
}

不同的是， hatJump 动画只会在用户点击神奇猫的帽子时才会被触发。这意味着，我们需要使用 JavaScript 给 .hat 元素添加一个点击事件（.click）。当用户点击神奇猫的帽子（.hat）时，给它添加一个 .hat--active类名，然后将 hatJump 动画应用于 .hat--active ，并在 hatJump 动画运行结束后将 .hat 上的 .hat--active 类名移除。

JavaScript
const hat = document.querySelector(".hat");
 
hat.addEventListener("click", function () {
    if (hat.classList.contains("hat--active")) {
        return;
    }
    
    // 添加活动类
    hat.classList.add("hat--active");
  
    // 在1.2秒后移除活动类
    setTimeout(function () {
        hat.classList.remove("hat--active");
    }, 1200);
});
CSS
.hat--active {
    animation: hatJump 1s cubic-bezier(0, 0.7, 0.5, 1.25);
}

Demo 地址：https://codepen.io/airen/full/bGJGqwB

给神奇猫的领结添加动画是相似的，只是应用了不同的动画和类：

JavaScript
const bowtie = document.querySelector(".bowtie");
 
bowtie.addEventListener("click", function () {
    if (bowtie.classList.contains("bowtie--active")) {
        return;
    }
    
    // 添加活动类。
    bowtie.classList.add("bowtie--active");
 
    // 在2秒后移除活动类
    setTimeout(function () {
        bowtie.classList.remove("bowtie--active");
    }, 2200);
});
CSS
.bowtie {
    transform-box: fill-box;
    transform-origin: center center;
    cursor: pointer;
}
 
.bowtie--active {
    animation: bowtieSpin 2s cubic-bezier(0, 0.7, 0.5, 1.05);
}
 
@keyframes bowtieSpin {
    from {
        rotate: 0 0 1 0deg;
    }
 
    to {
        rotate: 0 0 1 1800deg;
    }
}

Demo 地址：https://codepen.io/airen/full/eYoYvGj

接下来要做的，我想你已经猜到了。是的，和前面一样，当用户点击咖啡机手柄（.lever）时，给它自身和咖啡添加活动类及其相应的动画。

JavaScript
const lever = document.querySelector(".lever");
const coffee = document.querySelector(".coffee");
 
lever.addEventListener("click", function () {
    if (lever.classList.contains("lever--active")) {
        return;
    }
 
    lever.classList.add("lever--active");
    coffee.classList.add("coffee--active");
 
    setTimeout(function () {
        lever.classList.remove("lever--active");
        coffee.classList.remove("coffee--active")
    }, 2500);
});
CSS
.lever, .coffee {
    transform-box: fill-box;
    transform-origin: center bottom;
}
 
.lever {   
    cursor: pointer; 
}
 
.lever--active {
    animation: leverPush 2.5s linear;
}
 
@keyframes leverPush {
    0%,100% {
        translate: 0 0;
    }
    8%, 90% {
        translate:0 50%;
    }
}
 
.coffee--active {
    animation: coffeeStream 2.4s 0.1s ease-out forwards;
}
 
@keyframes coffeeStream {
    0% {
        transform: translateY(0);
    }
    5%,95% {
        transform: translateY(50%);
    }
    100% {
        transform: translateY(150%);
    }
}

Demo 地址：https://codepen.io/airen/full/MWRWpVX

事实上，到这里，神奇猫的整个动画效果已完成。不过，如果你感兴趣的话，还可以在这个基础上添加其他的动画效果。例如，当你点击咖啡机手柄时，给咖啡机添加闪烁的动画效果：

CSS
@keyframes flash {
    0% {
        fill: yellow;
    }
    20% {
        fill: pink;
    }
    40% {
        fill: blue;
    }
    60% {
        fill: orange;
    }
    80% {
        fill: red;
    }
    100% {
        fill: purple;
    }
}
 
.switch {
    fill: #4d4e4e;
}
 
.switch--active {    
    animation: flash 0.2s infinite steps(5, jump-none);
}

Demo 地址：https://codepen.io/airen/full/jOROmqe

你还可以给神奇猫左上角的气泡和小手添加一些微妙的动画：

CSS
.arms {
    transform-box: fill-box;
    transform-origin: center center;
    animation: armMove 1.5s ease-in-out infinite alternate;
}
 
@keyframes armMove {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(2deg) translateY(-4px) translateX(-4px);
    }
}
 
.hand {
    transform-box: fill-box;
    transform-origin: 10% 50%;
    animation: handMove 1.5s ease-in-out infinite alternate;
}
 
@keyframes handMove {
    from {
        transform: rotateZ(-10deg);
    }
    to {
        transform: rotateZ(10deg) translateX(-5px) translateY(-5px);
    }
}
 
.bubble {
    animation: bubbleMove 2s 0.2s ease-in-out infinite alternate;
}
 
@keyframes bubbleMove {
    from {
        translate: 0 -8px;
    }
    to {
        translate: 0 8px;
    }
}

Demo 地址：https://codepen.io/airen/full/wvZvdPx

当然，要是你感兴趣的话，还可以继续在这个基础上为神奇猫添加动画效果。比如，挠挠猫耳朵的时候有一些微妙的动作，比如点击类似“汉堡菜单”图标的地方弹出对话框或菜单选项。这一切都可以根据你的喜好来。只不过需要注意的是，在同一个神奇猫插图上添加很多动画效果时需要考虑它们的协调性，一致性。如果你仅仅是为了练习，那么可以不考虑这些。另外，smashingmagazine.com 网站还提供了很多不同类型的“神奇猫”插图，你可以尝试着为它们添加不一样的动画效果，使神奇猫变得有生命，也变得更可爱！

SVG 文件地址：https://www.smashingmagazine.com/images/banners/smashing-friskies-900x200.svg

你有勇气挑战一下吗？如果有的话，可以点击这里获取上图对应的 SVG 文件，然后给 SVG 添加一些吸引人注意力的动画效果！